एसवीजी/सीएसएस स्ट्रोक डैश लाइन दो रंगों के साथ - क्या यह संभव है?

क्या सीएसएस का उपयोग करना एक लाइन (या आकृति किनार) को दो वैकल्पिक रंगों के साथ परिभाषित करना संभव है? यही कारण है, अगर 1 और 2, अलग अलग रंगों पिक्सल हैं तोएसवीजी/सीएसएस स्ट्रोक डैश लाइन दो रंगों के साथ - क्या यह संभव है?

1212121212121212 या 112211221122

मैं मूल रूप से किसी तरह दो रंगों के साथ स्ट्रोक-dasharray उपयोग करना चाहते हैं। रेखा पूरी तरह से रंगीन है।

यदि यह संभव नहीं है, तो इसका अनुमान लगाने का एक अच्छा तरीका क्या है? उदाहरण के लिए, मैं दो रंगों के साथ एक दोहराया रैखिक ढाल बना सकता हूं, लेकिन जावास्क्रिप्ट से दो रंगों को सेट करना मुश्किल होगा।

स्रोत

2012-09-25 Andrew Mao

एक ही रास्ता: http://www.webdevout.net/test?01v&raw (उस के साथ एक और पीछे एक रंग के साथ, परत एक तत्व है एक और रंग [धराशायी स्ट्रोक के रूप में]) – reisio

क्या रेसिसियो अब तक का सबसे अच्छा और सुरक्षित जवाब प्रतीत होता है। यदि ब्राउज़र कुछ गलत करता है तो डुओपिक्सेल के समाधान में स्क्रूप्स के लिए अधिक संभावना होती है। मन आपकी टिप्पणी को एक जवाब में परिवर्तित कर रहा है? –

यह सिर्फ एक तत्व के साथ एसवीजी में संभव नहीं है, लेकिन आप दो अलग अलग 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

आपका उत्तर अच्छा है, लेकिन मैं इंगित करता हूं कि मैं उपरोक्त टिप्पणी में कार्यान्वयन को प्राथमिकता देता हूं - एक धराशायी रेखा आयताकार के पीछे ठोस रेखा आयताकार - कम त्रुटि-प्रवण होने के लिए। ऐसा लगता है कि 'स्ट्रोक-डैशऑफसेट' का परिणाम मजाकिया दिखने वाले आयतों में हो सकता है यदि सीएसएस थोड़ा बंद हो या ब्राउजर ने विभिन्न स्थानों पर डैश शुरू कर दिया। –

+1 एचटीएमएल –

के बजाय svg का उपयोग करने के लिए +1 मुझे लगता है कि ब्राउज़र ब्राउज़र की बग के विभिन्न स्थानों में डैश शुरू कर रहा है, और यदि सीएसएस थोड़ा बंद है, तो आपको @reisio से समाधान के साथ एक ही समस्या होगी । हालांकि, वह उत्तर उन ब्राउज़रों के लिए काम करेगा जो एसवीजी का समर्थन नहीं करते हैं। –

-3

लागू एक सीमा है कि 50 के लिए नीचे के साथ डैश, margin-left बढ़ने के साथ 50 divs बनाएं, और 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/ प्रदर्शन लाइनों और समग्र पानी का छींटा पैटर्न के साथ एक चक्र देखें।

के साथ अपडेट किया अतः स्निपेट:

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

एसवीजी/सीएसएस स्ट्रोक डैश लाइन दो रंगों के साथ - क्या यह संभव है?

उत्तर

संबंधित मुद्दे