SVG之旅:描边特性

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

上一节介绍SVG填充特性中,提到了SVG中另一个特性描边特性(stroke。SVG的描边特性主要包括strokestroke-widthstroke-opacitystroke-dasharraystroke-linecapstroke-linejoinstroke-miterlimit等属性。在这一节中,主要围绕这几个SVG属性进行展开。

在SVG中咱们通过stroke来对绘制的图形边框进行设置,我们可以对图形边框的颜色、粗细、透明度,连接端,线帽和虚线等进行设置。为了更好的理解SVG中的描边特性,我们采用一个葡萄的轮廓图来展开介绍。

特别声明:接下来的葡萄轮廓图来自于@jonitrythall的《Using SVG stroke Attributes》一文中。

stroke

stroke属性主要用来定义SVG绘制的形状和路径的边框颜色。类似于CSS中的border-color。和fill特性一样,可以在SVG的内联代码中使用stroke属性,也可以在CSS样式代码中使用stroke属性。如果想让SVG绘制的图形不带有任何边框,只需要设置stroke的值为none即可。如果你不设置任何的颜色值,那么默认的颜色为black

<svg width="250px" height="265px" viewBox="0 0 150 165">
    <path class="grapes" fill="none" stroke="#765373" d=".../>
    <g>
        <path class="stem" fill="none" stroke="#59351C" d="..."/>
        <path class="leaf" fill="#7AA20D" stroke="#7AA20D" d=" ..."/>
    </g>
</svg>

stroke-width

stroke-width属性的值用来设置绘制图形边框的宽度,类似于border-width。其默认值是1。如果值是百分数,那这个值是基于视图的尺寸来计算。比如,下面的示例,把葡萄的边框宽度设置为6px、葡萄的茎设置为5px,叶子设置为2px

<svg width="250px" height="265px" viewBox="0 0 150 165">
    <path class="grapes" fill="none" stroke="#765373" stroke-width="6" d="..."/>
    <g>
        <path class="stem" fill="none" stroke="#59351C" stroke-width="5" d="..."/>
        <path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="2" d="..."/>
    </g>
</svg>

stroke-linecap

当使用<line>或者<polyline>画线时,可以给stroke-linecap指定不同的值来确定线的头尾形状。也就是说,给一个开放路径的定义端点采用哪种形状。其主要有四个值:buttroundsquareinherit。对应的效果如下:

stroke-linecap

把葡萄的边框设置为butt、葡萄的茎设置为square,葡萄的叶子设置为round

<svg width="250px" height="265px" viewBox="0 0 150 165">
    <path class="grapes" fill="none" stroke="#765373" stroke-width="6" stroke-linecap="butt" d="..."/>
    <g>
        <path class="stem" fill="none" stroke="#59351C" stroke-width="5" stroke-linecap="square" d="..."/>
        <path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="2" stroke-linecap="round" d="..."/>
    </g>
</svg>
‘butt’ cap
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/svg/svg-stroke.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部