SVG 自学微笔记(06) - 线段的特性

不定更新、可能烂尾XD

学习资源: W3Schools、其他网路资料

在前面的微笔记中，有使用到<line></line>来绘製线段，虽然还没写SVG Path的内容，但Path其实也能拿来绘製线段喔! 在本篇微笔记会使用到非常简单的Path来绘製线段，并介绍几种线段的特性(Stroke Property)。

SVG : 线段

(仅列出部分有使用到的属性)

<svg></svg>

height : 整个图形(画布)的原始长度width: 整个图形(画布)的原始宽度

<g></g>

主要的作用是群组化，可以设定共通属性

<path></path> 或 <path />

d : 路径(path)会经过的点(x,y)stroke : 线段颜色stroke-width : 线段的宽度stroke-linecap : 线段头尾的形式stroke-dasharray : 用来建立虚线的间隔阵列stroke-opacity : 线段颜色的透明度

範例1 - 线段颜色

Path可以做的操作蛮多也挺複杂的~

d放的是path会经过的点，还有关于这些点的操作M : 移动路径初始点L : 将初始点连线(Line To)到某一点Z : 关闭路径

<svg height="300" width="400">    <g>        <path stroke="red" d="M20 30 L200 30Z"></path>        <path stroke="green" d="M20 50 L200 50Z"></path>        <path stroke="blue" d="M20 70 L200 70Z"></path>    </g></svg>

範例2 - 线段宽度

可以利用<g></g>把线段群组化并设定共通属性，像下面就把所有线段都设为黑色。

<svg height="300" width="400">    <g stroke="black">        <path stroke-width="2" d="M20 30 L200 30Z"></path>        <path stroke-width="4" d="M20 50 L200 50Z"></path>        <path stroke-width="6" d="M20 70 L200 70Z"></path>    </g></svg>

範例3 - 线段头尾形式

除了round可以很容易看出效果，其他两种效果都看不太出来。
这边还要注意不能用Z关闭路径，不然stroke-linecap会无法产生效果。

<svg height="300" width="400">    <g stroke="black" stroke-width="6">        <path stroke-linecap="butt" d="M20 30 L200 30"/>        <path stroke-linecap="round" d="M20 50 L200 50"/>        <path stroke-linecap="square" d="M20 70 L200 70"/>    </g></svg>

範例4 - 线段的虚线形式

透过stroke-dasharray可以规範虚线段的间隔(1实线1空白)。
举 stroke-dasharray="5,10,5,10" 为例，实线是5单位而空白是10单位，以5实5空5实5空不断做循环。

<svg height="300" width="400">    <g stroke="black" stroke-width="6">        <path stroke-dasharray="10,10" d="M20 30 L200 30"/>        <path stroke-dasharray="5,10,5,10" d="M20 50 L200 50"/>        <path stroke-dasharray="5,10,20,10" d="M20 70 L200 70"/>    </g></svg>

参考资料

SVG Stroke Properties - W3Schools