吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【SVG】塗りと線

2015年2月19日 / category : svg

SVGの塗りとストロークをまとめてみた・・・疲れた。

1. 塗り – fill
2. 塗りのルール – fill-rule
3. 塗りの透明度 – fill-opacity
4. ストロークの色 – stroke
5. ストロークの幅 – stroke-width
6. ストロークの両端の形状 – stroke-linecap
7. ストロークの角の形状 – stroke-linejoin
8. ストロークの留め幅の限界比率 – stroke-miterlimit
9. ストロークの留め幅の限界比率 – stroke-miterlimit
10. ダッシュパターンのずらす距離 – stroke-dashoffset
11. ストロークの透明度 – stroke-opacity

塗り – fill

HTML
<svg width="300" height="300">
<rect width="300" height="300" fill="#e5000d" />
</svg>

塗りのルール – fill-rule

fill-rule=”nonzero”
HTML
<svg width="300" height="300">
<path
	width="300"
	height="300"
	d="M150,3 A1,1 0 0,1 150,297 A1,1 0 0,1 150,3 Z M150,30 A1,1 0 0,1 150,270 A1,1 0 0,1 150,30 Z"
	fill-rule="nonzero"
	fill="#e5000d"
	stroke="black"
	stroke-width="3"
/>
</svg>
fill-rule=”evenodd”
HTML
<svg width="300" height="300">
<path
	width="300"
	height="300"
	d="M150,3 A1,1 0 0,1 150,297 A1,1 0 0,1 150,3 Z M150,30 A1,1 0 0,1 150,270 A1,1 0 0,1 150,30 Z"
	fill-rule="evenodd"
	fill="#e5000d"
	stroke="black"
	stroke-width="3"
/>
</svg>

塗りの透明度 – fill-opacity

HTML
<svg width="300" height="300">
<rect
	width="300"
	height="300"
	fill="#e5000d"
	fill-opacity="0.5"
	stroke="black"
	stroke-width="20"
/>
</svg>

ストロークの色 – stroke

HTML
<svg width="300" height="300">
<rect
	width="300"
	height="300"
	fill="#e5000d"
	stroke="#e59100"
	stroke-width="20"
/>
</svg>

ストロークの幅 – stroke-width

HTML
<svg width="300" height="300">
<rect
	width="300"
	height="300"
	fill="#e5000d"
	stroke="#e59100"
	stroke-width="20"
/>
</svg>

ストロークの両端の形状 – stroke-linecap

stroke-linecap=”butt”

HTML
<svg width="300" height="300">
<line stroke="#e5000d" stroke-width="20" stroke-linecap="butt" x1="10" y1="10" x2="290" y2="290" />
<line stroke="#000" stroke-width="3" x1="10" y1="10" x2="290" y2="290" />
</svg>
stroke-linecap=”round”

HTML
<svg width="300" height="300">
<line stroke="#e5000d" stroke-width="20" stroke-linecap="round" x1="10" y1="10" x2="290" y2="290" />
<line stroke="#000" stroke-width="3" x1="10" y1="10" x2="290" y2="290" />
</svg>
stroke-linecap=”square”

HTML
<svg width="300" height="300">
<line stroke="#e5000d" stroke-width="20" stroke-linecap="square" x1="10" y1="10" x2="290" y2="290" />
<line stroke="#000" stroke-width="3" x1="10" y1="10" x2="290" y2="290" />
</svg>

ストロークの角の形状 – stroke-linejoin

stroke-linejoin=”miter”

HTML
<svg width="300" height="300">
<path stroke="#e5000d" stroke-width="20" stroke-linejoin="miter" d="M20,280 L150,20 280,280" fill="none" />
<path stroke="#000" d="M20,280 L150,20 280,280" fill="none" />
</svg>
stroke-linejoin=”round”

HTML
<svg width="300" height="300">
<path stroke="#e5000d" stroke-width="20" stroke-linejoin="round" d="M20,280 L150,20 280,280" fill="none" />
<path stroke="#000" d="M20,280 L150,20 280,280" fill="none" />
</svg>
stroke-linejoin=”bevel”

HTML
<svg width="300" height="300">
<path stroke="#e5000d" stroke-width="20" stroke-linejoin="bevel" d="M20,280 L150,20 280,280" fill="none" />
<path stroke="#000" d="M20,280 L150,20 280,280" fill="none" />
</svg>

ストロークの留め幅の限界比率 – stroke-miterlimit

HTML
<svg width="300" height="300">
<path stroke-linejoin="miter" stroke-miterlimit="8" />
<path stroke-linejoin="miter" stroke-miterlimit="0" />
</svg>

ストロークの留め幅の限界比率 – stroke-miterlimit

HTML
<svg width="300" height="300">
<line stroke-dasharray="6" />
<line stroke-dasharray="6,1" />
<line stroke-dasharray="6,3,1" />
</svg>

ダッシュパターンのずらす距離 – stroke-dashoffset

HTML
<svg width="300" height="300">
<line stroke-dasharray="10,10" />
<line stroke-dasharray="10,10" stroke-dashoffset="10" />
</svg>

ストロークの透明度 – stroke-opacity

HTML
<svg width="300" height="300">
<rect fill="#e5000d" stroke="black" stroke-width="20" stroke-opacity="0.5" />
</svg>