css - 具有两种颜色的 SVG/CSS 描边虚线 - 这可能吗？

Question

是否可以使用 CSS 定义具有两种交替颜色的虚线的线(或形状边缘)？即如果1和2是不同颜色的像素点，则

1212121212121212 或 112211221122

我基本上想要一些方法来使用具有两种颜色的 stroke-dasharray。线条本身是完全彩色的。

如果这不可能，什么是近似的好方法？例如，我可以用两种颜色交替创建一个重复的线性渐变，但这很难从 javascript 设置这两种颜色。

Answer 1

这在只有一个元素的 SVG 中是不可能的，但是您可以使用两个不同的矩形，然后应用 stroke-dashoffset: x...

rect.stroke-red {
  stroke: red;
  fill: none;
  stroke-width: 5;
}

rect.stroke-green {
  stroke: green;
  fill: none;
  stroke-dasharray: 5,5; 
  stroke-width: 5;
}

<svg xmlns="http://www.w3.org/2000/svg">
    <rect class="stroke-red" x="10" y="10" width="101" height="101" />
    <rect class="stroke-green" x="10" y="10" width="101" height="101" />
</svg>