有兩種顏色的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筆劃虛線 - 有可能嗎？

回答

相關問題