具有两种颜色的 SVG/CSS 描边虚线 - 可能吗? [英] SVG/CSS stroke dashed line with two colors - is it possible?

问题描述

是否可以使用 CSS 来定义具有两种交替颜色的虚线(或形状边缘)?也就是说，如果1和2是不同颜色的像素，那么

Is it possible to use CSS to define a line (or shape edge) with two alternating colors that are dashed? That is, if 1 and 2 are different colored pixels, then

1212121212121212 或 112211221122

1212121212121212 or 112211221122

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

I basically want some way to use stroke-dasharray with two colors. The line itself is completely colored.

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

If this is not possible, what is a good way to approximate it? For example, I could create a repeated linear gradient with two colors alternating, but this would be hard to set the two colors from javascript.

推荐答案

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

This is not possible in SVG with just one element, but you can use two different rects and then apply a 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>

这篇关于具有两种颜色的 SVG/CSS 描边虚线 - 可能吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！