SVG/CSS inme çizgisi iki renkle kesilmiş - bu mümkün mü?

Bir çizgi (veya şekil kenarı) kesik iki alternatif renkle tanımlamak için CSS kullanmak mümkün mü? 1 ve 2SVG/CSS inme çizgisi iki renkle kesilmiş - bu mümkün mü?

1212121212121212 veya

112211221122 Temelde iki renk ile inme-DashArray kullanmak için bir yol istiyorum, sonra farklı renkli piksel Yani, eğer. Çizgi tamamen renklidir.

Bu mümkün değilse, yaklaşık olarak tahmin etmenin iyi bir yolu nedir? Örneğin, iki renk dönüşümlü olarak tekrarlanan bir doğrusal gradyan oluşturabilirdim, ancak bu iki rengi javascript'ten ayarlamak zor olurdu.

kaynak

2012-09-25 Andrew Mao

bir yolu: http://www.webdevout.net/test?01v&raw (yani arka arkaya tek bir renk ile birlikte, tabaka bir elemandır Başka bir renk [kesikli bir inme şeklinde]) – reisio

Ne demek reisio şimdiye kadarki en iyi ve en güvenli cevap gibi görünüyor. Tarayıcıda yanlış bir şey varsa, Duopixel'in çözümü daha fazla potansiyel olabilir. Yorumunuzu bir cevaba dönüştürmeyi mi düşünüyorsunuz? –

Bu sadece bir eleman ile SVG mümkün değildir, ancak 50 olan bir sınırda için bir 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/

kaynak

2012-09-25 03:48:29 Duopixel

Cevabınız iyidir, ancak yukarıdaki yoruma yorum yapmayı tercih ediyorum - daha az hataya eğilimli olmak için kesikli çizgi dikdörtgeninin arkasındaki düz çizgi dikdörtgeni. CSS biraz kapalı veya tarayıcı farklı yerlerde çizgi başlattı eğer 'inme-dashoffset' komik görünümlü dikdörtgenler ile sonuçlanabilir gibi görünüyor. Html yerine svg kullanmak için –

+1 –

Eğer tarayıcı tarayıcı hataları olan farklı yerlerde tire çizgilerini başlatıyorsa ve CSS biraz kapalıysa, @reisio çözümüyle aynı sorunlara sahip olacaksınız . Ancak, bu cevap SVG'yi desteklemeyen tarayıcılar için çalışacaktır. –

-3

uygulamak daha sonra iki farklı rects kullanabilir ve Alt kısımdaki tire çizgileri, artan margin-left ile 50 div ve overflow:hidden numaralı bir kapsayıcı oluşturun.

kaynak

2012-09-30 00:28:57 eddieberklee

bir yolu:

olan

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

katman [kesik felç şeklinde] Başka bir renk ile arka arkaya tek bir renk ile bir eleman. @duopixel gelen yanıta

kaynak

2012-11-17 21:03:46 reisio

Bina, birden renklerle oldukça karmaşık bir desen oluşturmak için stroke-dasharray özelliğini kullanabilirsiniz:

.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/ gösteren çizgiler ve kompozit çizgi desenli bir daire bakın. ile Güncelleme

SO pasajı:

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>

kaynak

2013-03-22 19:29:38

SVG/CSS inme çizgisi iki renkle kesilmiş - bu mümkün mü?

cevap

İlgili konular