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

是否有可能使用CSS来定义具有两个交替虚线的颜色的线条（或形状边缘）？也就是说，如果1和2是不同颜色的像素，然后有两种颜色的SVG/CSS笔划虚线 - 有可能吗？

1212121212121212或112211221122

我基本上要某种方式使用行程dasharray两种颜色。线本身是完全着色的。

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

来源

2012-09-25 Andrew Mao

方式一：http://www.webdevout.net/test?01v&raw（即与后面的另一一种颜色用，层的一个元件另一种颜色[以虚线的形式] – reisio

reisio说什么似乎是迄今为止最好和最安全的答案。如果浏览器出现问题，Duopixel的解决方案似乎有更大的潜力。将您的评论转换为答案？ –

这是不可能的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; 
}

演示http://jsfiddle.net/aMCsY/

来源

2012-09-25 03:48:29 Duopixel

你的回答很好，但我会指出，我更喜欢上面的评论中的实现 - 虚线矩形后面的实线矩形 - 因为不太容易出错。看起来像'stroke-dashoffset'可能会导致有趣的长方形，如果CSS稍微关闭或浏览器在不同的地方开始破折号。 –

+1使用svg而不是html –

我认为如果浏览器在不同的地方开始了破折号，这是一个浏览器错误，并且如果CSS稍微关闭，您将遇到与@reisio解决方案相同的问题。但是，该答案适用于不支持SVG的浏览器。 –

-3

对于具有50边框沿着底部破折号，创建50个div，增加margin-left，以及整体容器overflow:hidden。

来源

2012-09-30 00:28:57 eddieberklee

一种方式：

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

即，层与后面的另一一种颜色与另一种颜色[以虚线冲程的形式]一种元素。从@duopixel答案

来源

2012-11-17 21:03:46 reisio

大厦，您可以使用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>

来源

2013-03-22 19:29:38

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

回答

相关问题