Svg线半实线半虚线

html5 • • 问答

我有一个内联 SVG 对象，其中有一些行。我正在尝试将线的一半绘制为实线，另一半绘制为虚线。

  
<svg height="30" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <line stroke-dasharray="50%,1%,1%,1%" x1="10" x2="280" y1="10" y2="10" />
  </g>
</svg>

回答

最简单的方法是使用 2 个线对象。一个作为实线，另一个作为虚线。这是一个例子：

<svg height="30" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <line x1="10" x2="150" y1="10" y2="10" />
    <line stroke-dasharray="5,5" x1="150" x2="280" y1="10" y2="10" />    
  </g>
</svg>

该行程dasharray属性将重演下去，所以如果你输入“模式”不会持续到该行的结束，它会再次使用的第一个值和重复的模式。
您可以看到在您的示例中，长划线（50% 的值）重复了 3 次，中间有 3 个小划线（1% 的值）（2 个空的和一个实心的）。

  • Well hopefully you get a better understanding about svg and `stroke-dasharray`. Have fun SVGing !

以上是Svg线半实线半虚线的全部内容。
THE END
分享
二维码
< <上一篇
下一篇>>
相关内容