属性
stroke-width
SVG具有stroke-width定义笔触宽度的CSS属性。
<svg width="500" height="120">
<circle cx="50" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 1px;" />
<circle cx="150" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 3px;" />
<circle cx="250" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 6px;" />
<circle cx="350" cy="50" r="25" style="stroke: #000066; fill: none;stroke-width: 12px;" />
</svg>
效果如图:
stroke-linecap(描边线帽)
strokelinecap属性定义不同类型的开放路径的终结。
<svg >
<g fill="none" stroke="black" stroke-width="6">
<path stroke-linecap="butt" d="M5 20 l215 0" />
<path stroke-linecap="round" d="M5 40 l215 0" />
<path stroke-linecap="square" d="M5 60 l215 0" />
</g>
</svg>
效果如图:
stroke-linejoin
该CSS属性stroke-linejoin
, 定义如何在一个形状两条线之间的连接被渲染。该CSS属性stroke-linejoin
可以采用三个值中的一个。值:
- miter
- round
- bevel
<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50" style="stroke: #FF0000; fill:none;stroke-width:16px;stroke-linejoin: miter;"></path>
<text x="22" y="20">miter</text>
<path d="M120,100 l20,-50 l20,50" style="stroke: #FF0000; fill:none;stroke-width:16px;stroke-linejoin: round;"></path>
<text x="122" y="20">round</text>
<path d="M220,100 l20,-50 l20,50" style="stroke: #FF0000; fill:none;stroke-width:16px;stroke-linejoin: bevel;"></path>
<text x="222" y="20">bevel</text>
</svg>
效果如图:
stroke-miterlimit
style样式中stroke-miterlimit
属性与stroke-linejoin
一起使用。
如果stroke-linejoin
设置为斜接,则stroke-miterlimit
可以使用来限制两条线相交的点(线角(角)延伸)之间的距离。
<svg width="500" height="120">
<path d="M20,100 l20,-50 l20,50" style="stroke: #000000;fill:none;stroke-width:16px;stroke-linejoin: miter; stroke-miterlimit: 1.0;"></path>
<text x="29" y="20">1.0</text>
<path d="M120,100 l20,-50 l20,50" style="stroke: #000000;fill:none;stroke-width:16px;stroke-linejoin: miter;stroke-miterlimit: 2.0;"></path>
<text x="129" y="20">2.0</text>
<path d="M220,100 l20,-50 l20,50" style="stroke: #000000;fill:none;stroke-width:16px;stroke-linejoin: miter;stroke-miterlimit: 4.0;"></path>
<text x="229" y="20">4.0</text>
</svg>
效果如图:
stroke-dasharray
SVG CSS属性stroke-dasharray
用于绘制以虚线呈现的SVG形状的笔触。之所以称为“破折号数组”,是因为您提供了一个数字数组作为值。这些值定义破折号和空格的长度。
<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" />
</svg>
定义了一个带有虚线的笔划,虚线部分的宽度为10像素,虚线之间的间隔为5像素。
效果如图:
带有不同破折号和空格宽度的:
<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5 5 5"></line>
<line x1="20" y1="40" x2="120" y2="40" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5 5 10"></line>
</svg>
第一行以10的虚线宽度开始,然后是5像素的间距,然后是5像素的虚线,然后是5像素的另一间距。然后重复该模式。
第二行以虚线宽度10开始,然后是5像素的间距,然后是5像素的虚线,最后是10像素的间距。
效果如图:
stroke-dashoffset
offset:偏移的意思。这个属性是相对于起始点的偏移,正数偏移x值的时候,相当于往左移动了x个长度单位,负数偏移x的时候,相当于往右移动了x个长度单位。
需要注意的是,不管偏移的方向是哪边,要记得
dasharray
是循环的,也就是 虚线-间隔-虚线-间隔。
<svg width="500" height="120">
<line x1="20" y1="20" x2="120" y2="20" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" />
<line x1="20" y1="40" x2="120" y2="40" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" stroke-dashoffset="3"/>
<line x1="20" y1="60" x2="120" y2="60" style="stroke: #000000; fill:none;stroke-width: 6px;stroke-dasharray: 10 5" stroke-dashoffset="-3"/>
</svg>
效果如图:
stroke-opacity
SVG CSS属性stroke-opacity
用于定义SVG形状轮廓的不透明度。该值越接近1,则笔划越不透明。默认stroke-opacity
值为1,表示笔划完全不透明。
<svg width="500" height="120">
<text x="22" y="40">Text Behind Shape</text>
<path d="M20,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 0.3;"></path>
<path d="M80,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 0.7;"></path>
<path d="M140,40 l50,0" style="stroke: #00ff00;fill:none;stroke-width:16px;stroke-opacity: 1;"></path>
</svg>
效果如图:
实例效果
线段从无到有,由短变长
第一步,设置stroke-dasharray虚线长度等于当前svg的宽度,间隔大于或者等于svg宽度
<svg >
<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320"/>
</svg>
这时可视区域内只能看到一段虚线,如图:
第二步,设置stroke左移300单位(stroke-dashoffset:300
),也就是刚好隐藏了虚线,可视区域内变成了320单位的间隔。
<svg >
<line id="line" x1="30" y1="30" x2="300" y2="30" stroke-width="20" stroke="red" stroke-dasharray="300,320" stroke-dashoffset="300"/>
</svg>
第三步,当鼠标移入的时候,使offset由300变成0,就实现了动图中的效果
svg:hover #line{
stroke-dashoffset: 0;
}
#line{
transition: all 2s;
}
圆形环绕一圈效果
鼠标hover的时候,外层线段绕自身一圈。这个动画的实现原理跟上面一样,设置stroke-dasharray
虚线长度等于当前圆的周长,间隔大于或者等于圆的周长。
第一步,画圆,圆的半径50。
<svg width="200" height="200" viewBox="0 0 200 200">
<circle id="circle" cx="100" cy="80" r="50" fill="gray" stroke-width="5" stroke="green" />
</svg>
第二步,设置圆的stroke-dasharray
和stroke-dashoffset
,为圆的周长。
#circle{
transition: all 2s;
stroke-dasharray:314,314;
stroke-dashoffset:314;
}
第三步,hover的时候,设置stroke-dashoffset
为0,注意圆的stroke起始位置为右侧中间
svg:hover #circle{
stroke-dashoffset:0;
}