Question

是否可以使用CSS来定义具有两个交替颜色的线条（或形状边缘）？也就是说，如果1和2是不同颜色的像素，那么

1212121212121212或112211221122

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

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

Answer 1

只有一个元素在SVG中无法实现，但您可以使用两个不同的rects，然后应用stroke-dashoffset: x ...

<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>


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

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

demo http://jsfiddle.net/aMCsY/

Answer 2

根据@duopixel的答案，您可以使用stroke-dasharray属性构建一个包含多种颜色的相当复杂的模式：

.L4 {
    stroke: #000;
    stroke-dasharray: 20,10,5,5,5,10;
}
.L5 {
    stroke: #AAA;
    stroke-dasharray: 0,20,10,15,10,0
}
.L6 {
    stroke: #DDD;
    stroke-dasharray: 0,35,5,15
}

请参阅http://jsfiddle.net/colin_young/Y38u9/演示线条和带有复合虚线图案的圆圈。

使用SO片段更新：

svg {
    width: 100%;
    height: 160px;
}
path, circle {
    stroke-width: 4;
}
text {
    alignment-baseline: central;
    font-family: sans-serif;
    font-size: 10px;
    stroke-width: 0;
    fill: #000;
    text-anchor: middle;
}
.dim {
    stroke: #AAA;
    stroke-width: 1;
    stroke-dasharray: 1, 1;
}
circle.dim {
    fill: #FFF;
}
.L4 {
    stroke: #000;
    stroke-dasharray: 20, 10, 5, 5, 5, 10;
}
.L5 {
    stroke: #AAA;
    stroke-dasharray: 0, 20, 10, 15, 10, 0
}
.L6 {
    stroke: #DDD;
    stroke-dasharray: 0, 35, 5, 15
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g fill="none" stroke="black">
        <path class="dim" d="M5 20 l0 80" />
        <path class="dim" d="M25 20 l0 80 l-10 20" />
        <path class="dim" d="M35 20 l0 80 l-10 30" />
        <path class="dim" d="M40 20 l0 120" />
        <path class="dim" d="M45 20 l0 80 l10 30" />
        <path class="dim" d="M50 20 l0 80 l10 20" />
        <path class="dim" d="M60 20 l0 80 l15 10" />

        <text x="5" y="110">0</text>
        <text x="5" y="125">20</text>
        <text x="25" y="135">30</text>
        <text x="40" y="150">35</text>
        <text x="55" y="140">40</text>
        <text x="65" y="125">45</text>
        <text x="82" y="115">55</text>

        <path class="L4" d="M5 20 l215 0" />
        <path class="L5" d="M5 20 l215 0" />
        <path class="L6" d="M5 20 l215 0" />

        <!-- separated to show composition -->
        <text x="5" y="70" style="text-anchor:start">Separated to show composition:</text>
        <path class="L4" d="M5 80 l215 0" />
        <path class="L5" d="M5 90 l215 0" />
        <path class="L6" d="M5 100 l215 0" />

        <circle class="L4" cx="400" cy="80" r="60" />
        <circle class="L5" cx="400" cy="80" r="60" />
        <circle class="L6" cx="400" cy="80" r="60" />
    </g>
</svg>

Answer 3

一种方式：

<!doctype html>
<html>
	<head>
		<title></title>
		<style>
div {
	width: 100px;
	height: 100px;
}
.dashbox {
	border: 4px dashed blue;
	background: orange;
}
.dashbox > div {
	background: white;
}
		</style>
	</head>
	<body>
		<div class="dashbox">
			<div></div>
		</div>
	</body>
</html>

也就是说，第一层有一种颜色的元素在另一种颜色后面有另一种颜色[以虚线笔划的形式]。

Answer 4

一种可能对您有用的方法是在笔划上使用重复的线性渐变。这是一种适用于line的解决方法，因为您可以旋转渐变以匹配直线。

对于其他形状-可能有用，但不如破折号数组好。从正面看，它只是css，不需要额外的形状。

Codepen示例：

https://codepen.io/michbarsinai/pen/YzwXYwg

Answer 5

对于底部有50个破折号的边框，创建50个增加margin-left的div和一个overflow:hidden的整个容器。

两种颜色的SVG / CSS笔划虚线 - 是否可能？

5 个答案: