Question

我想使用path在svg中创建破折号类型行。如何将破折号样式应用于svg路径以创建虚线。请参考下面的SVG。

<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>

谢谢，

希瓦

Answer 1

您正在寻找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>

它采用逗号分隔的值表示solid，void。有趣的注意事项：如果数组中有一个奇数个值，当它重复时，模式会反转，即第一个值现在是空白，第二个值是实数。

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

相同

svg路径中的Dashtype行

1 个答案: