JSON에서 SVG 아이콘 만들기
17088 단어 webdevjavascriptdesignsvg
... 뿐만 아니라 레이아웃 선택기:
레이아웃 선택기에서 작업하면서 다양한 레이아웃 옵션에 대해 SVG 아이콘을 렌더링하는 데 도움이 되는 JavaScript가 필요하다는 것을 금방 깨달았습니다. 위 그림은 단순한 것입니다. 다른 프로젝트에서는 레이아웃이 훨씬 더 복잡합니다.
아이콘은
<rect>
및 <text>
-요소로 구성됩니다.각각의
<rect>
는 w
idth, h
8, x
및 y
속성을 가집니다.<rect width="${w}" height="${h}" x="${x}" y="${y}" />
JavaScript에서 두 개의 "열"이 있는 간단한 아이콘에 대한 논리를 저장하면 다음과 같습니다.
{
text: '50-50',
rects: [
{ w: 50, h: 100, x: 0, y: 0 },
{ w: 50, h: 100, x: 50, y: 0 }
]
}
SVG에서 이는 다음과 같습니다.
<svg viewBox="0 0 100 100">
<rect rx="0" width="50" height="100" x="0" y="0" />
<rect rx="0" width="50" height="100" x="50" y="0" />
</svg>
– 다음과 같습니다(명확성을 위해 "열"에 대한 텍스트를 추가했습니다).
여전히 멋져 보이지 않습니다... 간격도 제어해야 합니다.
gap
-const를 만들고 w
와 h
에서 빼봅시다.<rect width="${w - gap}" height="${h - gap}" x="${x}" y="${y}" />
그리고 아마도 일부
border-radius
? <rect>
-요소의 경우 이는 rx
-속성입니다.훨씬 낫다!
<text>
-요소를 추가해 보겠습니다. 여기에는 x
및 y
-속성만 필요합니다.<text x="${x}" y="${y}">TEXT</text>
<rect>
를 기준으로 이들을 중앙에 배치하고 싶습니다. const tX = x + (w / 2) - 4;
const tY = y + (h / 2) + 2;
-4
및 +2
는 글꼴 크기에 상대적이며 글꼴 및/또는 크기를 변경하는 경우 조정해야 할 수 있습니다.그래서... 그게 핵심입니다.
<rect>
- 및 <text>
- 노드로 렌더링된 레이아웃의 개체 표현(네이티브 또는 JSON에서 변환됨)입니다.객체 표현이 작업하기에 매우 간단하다는 것을 알았습니다.
{
text: '25-25-25-25',
rects: [
{ w: 25, h: 50, x: 0, y: 25 },
{ w: 25, h: 50, x: 25, y: 25 },
{ w: 25, h: 50, x: 50, y: 25 },
{ w: 25, h: 50, x: 75, y: 25 }
]
},
{
text: '25-25-50',
rects: [
{ w: 25, h: 50, x: 0, y: 25 },
{ w: 25, h: 50, x: 25, y: 25 },
{ w: 50, h: 50, x: 50, y: 25 }
]
},
/* etc .*/
이제 우리는 layout-objects, gap 및 border-radius의 배열로 호출할 수 있는 함수만 있으면 됩니다.
function renderIcons(layouts, gap, borderRadius) {
return layouts.map(icon => {
return `<svg viewBox="0 0 100 100">${
icon.rects.map((rect, index) => {
const tX = rect.x + (rect.w / 2) - 4;
const tY = rect.y + (rect.h / 2) + 2;
return `
<rect rx="${borderRadius}" width="${rect.w - gap}" height="${rect.h - gap}" x="${rect.x}" y="${rect.y}"${rect.class ? `class="${rect.class}"`:''} />
<text x="${tX}" y="${tY}%">${index+1}</text>` }).join('')
}${icon.text? `<text x="50%" y="90%" class="text">${icon.text}</text>`:''}
</svg>`
}).join('')
}
아이콘을 렌더링하려면 래퍼를 만들고 메서드를 호출하면 됩니다.
wrapper.innerHTML = renderIcons(layouts, 2, 3)
데모
다음은 Codepen 데모입니다. 색상을 조정하려면 아래로 스크롤하여
hue
- 및 saturation
- 컨트롤을 찾습니다.
Reference
이 문제에 관하여(JSON에서 SVG 아이콘 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/madsstoumann/creating-svg-icons-from-json-100a텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)