SVG单一路径上是否可能有多个或两个笔划？

Question

是否可以在单个svg路径上添加多个或两个笔划。 防爆。 这是我的代码

<svg id="" xmlns="http://www.w3.org/2000/svg" height="576" width="576" style="position: absolute;">
     <path d="M 10,10 L 10,20 20,20 20,10 30,10" fill="#ff0000;" stroke="#f000" stroke-width="1px" ></path>
</svg>

我希望笔触颜色如下图所示：

Answer 1

一条路，一条路 您可以使用不同颜色的stroke-dasharray的不同设置反复重绘相同的路径，这样三个间隙将跟随一个特定颜色的段。但是，这些段的长度必须与线段的长度一致 如果线段（从一个角到另一个角）在路径中具有不同的长度，那么这将不起作用 并且：线段的长度必须与stroke-dasharray指定的长度完全匹配。

编辑：为了对齐长度，您可以使用pathLength="100"在路径元素中明确设置路径长度 并将其与stroke-dasharray="25, 75"和不同的值相结合 stroke-dashoffset逐步完成0,25,50,75

Answer 2

我有分开的路，并给出不同的颜色。

<svg id="" xmlns="http://www.w3.org/2000/svg" height="576" width="576" style="position: absolute;">
   <path d="M 10,10 L 10,20" fill="#ff0000;" stroke="yellow" stroke-width="1px" ></path>
   <path d="M 10,20 L 20,20" fill="#ff0000;" stroke="red" stroke-width="1px" ></path>
   <path d="M 20,20 L 20,10" fill="#ff0000;" stroke="blue" stroke-width="1px" ></path>
   <path d="M 20,10 L 30,10" fill="#ff0000;" stroke="green" stroke-width="1px" ></path>
</svg>