svg - svg 路径中​​的 Dashtype 行

Question

我想使用路径在 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>

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

stroke-dasharray="10,5,10"是相同的 stroke-dasharray="10,5,10,10,5,10"