Question

我需要一个SVG路径，该路径使用具有以下＆＃39;模式的线路＆＃39;对于线：5像素宽， 1像素绿线后面是3像素白线，然后是1像素绿线。我知道我可以通过使用绿色，白色和绿色以及小偏移来绘制3条路径来实现它，但是如果可能的话，我正在寻找一种方法来实现它。

澄清：

想象一下，你有3支笔，3种不同的颜色绑在一起，所以你可以将它们作为一个使用。我想通过仅指定路径数据一次使用该3色笔绘制任意路径。

Answer 1

我认为你的意思是模式沿着这条线流动，就像两条平行的绿线一样。 SVG不能一气呵成。你恐怕需要使用两行。

<svg width="400" height="400">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="green" stroke-width="5"/>
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" stroke="white" stroke-width="3"/>
  <rect x="50" y="100" width="300" height="200" fill="none" stroke="green" stroke-width="5"/>
  <rect x="50" y="100" width="300" height="200" fill="none" stroke="white" stroke-width="3"/>
</svg>

Answer 2

您可以通过定义基础path一次，然后use该路径多次使用不同的x和y偏移量等来实现“3笔效果”设置（例如stroke）：

<svg width="200" height="170">
    <defs>
        <path id="pattern" d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" fill="none" />
    </defs>

    <g stroke-width="2">
        <use xlink:href="#pattern" x="0"  y="0"  stroke="red" />
        <use xlink:href="#pattern" x="5"  y="0"  stroke="green" stroke-width="4" />
        <use xlink:href="#pattern" x="10" y="0"  stroke="blue" />
    </g>
</svg>

具有多线模式的SVG线

2 个答案: