在svg路径中的Dashtype行

我想在svg中使用路径创建短划线类型的行。我如何将虚线样式应用于svg路径以制作虚线。请参阅下面的SVG。在svg路径中的Dashtype行

<path id="container_svg_John_0" fill="none" stroke-width="3" stroke="url(#container_svg_John0Gradient)" stroke-linecap="butt" stroke-linejoin="round" d="M 0 -17.25 L 21.633333333333333 -112.12499999999999 M 21.633333333333333 -112.12499999999999 L 43.266666666666666 -51.75 M 43.266666666666666 -51.75 L 86.53333333333333 -25.875 M 86.53333333333333 -25.875 L 108.16666666666666 -155.25 "></path>

感谢，

湿婆

来源

2013-05-08 SivaRajini

您正在寻找stroke-dasharray属性：

<path 
    id="container_svg_John_0" 
    fill="none" 
    stroke-width="3" 
    stroke="url(#container_svg_John0Gradient)" 
    stroke-linecap="butt" 
    stroke-linejoin="round" 
    stroke-dasharray="10,10" 
    d="M 0 -17.25 L 21.633333333333333 -112.12499999999999 M 21.633333333333333 -112.12499999999999 L 43.266666666666666 -51.75 M 43.266666666666666 -51.75 L 86.53333333333333 -25.875 M 86.53333333333333 -25.875 L 108.16666666666666 -155.25 "></path>

它需要一个逗号分隔值表示固体，无效。有趣的一面是：如果数组中有奇数个数值，当它重复时，模式就会颠倒过来，即第一个数值现在是空白，第二个数值是固定的。

stroke-dasharray="10,5,10"与stroke-dasharray="10,5,10,10,5,10"相同

来源

2013-05-09 22:51:08 miah

在svg路径中的Dashtype行

回答

相关问题