본문 바로가기
svg

svg viewBox: using viewBox matters.

by peach1227 2024. 2. 18.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-13.1 -13.1 26.2 26.2">
<g transform="translate(0,0)">
	<path d="M 4 8 L 10 1 L 13 0 L 12 3 L 5 9 C 6 10 6 11 7 10 C 7 11 8 12 7 12 A 1.42 1.42 0 0 1 6 13 A 5 5 0 0 0 4 10 Q 3.5 9.9 3.5 10.5 T 2 11.8 T 1.2 11 T 2.5 9.5 T 3 9 A 5 5 90 0 0 0 7 A 1.42 1.42 0 0 1 1 6 C 1 5 2 6 3 6 C 2 7 3 7 4 8 M 10 1 L 10 3 L 12 3 L 10.2 2.8 L 10 1
" stroke="#FF0000" stroke-width="0.1" fill="#ffff00"/>
	<path d="
M -8 4 L -1 10 L 0 13 L -3 12 L -9 5 C -10 6 -11 6 -10 7 C -11 7 -12 8 -12 7 A 1.42 1.42 90 0 1 -13 6 A 5 5 90 0 0 -10 4 Q -9.9 3.5 -10.5 3.5 T -11.8 2 T -11 1.2 T -9.5 2.5 T -9 3 A 5 5 180 0 0 -7 0 A 1.42 1.42 90 0 1 -6 1 C -5 1 -6 2 -6 3 C -7 2 -7 3 -8 4 M -1 10 L -3 10 L -3 12 L -2.8 10.2 L -1 10
" stroke="#FF0000" stroke-width="0.1" fill="#ffff00"/>
	<path d="
M -4 -8 L -10 -1 L -13 0 L -12 -3 L -5 -9 C -6 -10 -6 -11 -7 -10 C -7 -11 -8 -12 -7 -12 A 1.42 1.42 180 0 1 -6 -13 A 5 5 180 0 0 -4 -10 Q -3.5 -9.9 -3.5 -10.5 T -2 -11.8 T -1.2 -11 T -2.5 -9.5 T -3 -9 A 5 5 270 0 0 -0 -7 A 1.42 1.42 180 0 1 -1 -6 C -1 -5 -2 -6 -3 -6 C -2 -7 -3 -7 -4 -8 M -10 -1 L -10 -3 L -12 -3 L -10.2 -2.8 L -10 -1
" stroke="#FF0000" stroke-width="0.1" fill="#ffff00"/>
	<path d="
M 8 -4 L 1 -10 L -0 -13 L 3 -12 L 9 -5 C 10 -6 11 -6 10 -7 C 11 -7 12 -8 12 -7 A 1.42 1.42 270 0 1 13 -6 A 5 5 270 0 0 10 -4 Q 9.9 -3.5 10.5 -3.5 T 11.8 -2 T 11 -1.2 T 9.5 -2.5 T 9 -3 A 5 5 0 0 0 7 -0 A 1.42 1.42 270 0 1 6 -1 C 5 -1 6 -2 6 -3 C 7 -2 7 -3 8 -4 M 1 -10 L 3 -10 L 3 -12 L 2.8 -10.2 L 1 -10" stroke="#FF0000" stroke-width="0.1" fill="#ffff00"/>
<animateTransform attributeName="transform" type="rotate" values="0 0,0;360 0,0" begin="0s" dur="3s" />
</g>
</svg>
반응형

'svg' 카테고리의 다른 글

svg path parser:  (0) 2024.02.21
svg transform matrix: transform attribute value  (0) 2024.02.20
svg paper.js : star  (1) 2024.02.08
svg paper.js fill ,stroke : inherit value trouble, workaround  (0) 2024.02.06
svg paper.js : tools  (0) 2024.02.04