SVG/CSS Strich gestrichelte Linie mit zwei Farben - ist das möglich?

Ist es möglich, CSS zu verwenden, um eine Linie (oder Formkante) mit zwei alternierenden Farben zu definieren, die gestrichelt sind? Das heißt, wenn 1 und 2 verschiedenfarbige Pixel sind, dannSVG/CSS Strich gestrichelte Linie mit zwei Farben - ist das möglich?

1212121212121212 oder 112211221122

ich im Grunde eine Art und Weise will Schlaganfall-dasharray mit zwei Farben zu verwenden. Die Linie selbst ist vollständig gefärbt.

Wenn dies nicht möglich ist, was ist ein guter Weg, um es anzunähern? Zum Beispiel könnte ich einen wiederholten linearen Farbverlauf mit zwei abwechselnden Farben erzeugen, aber dies wäre schwierig, die beiden Farben aus Javascript zu setzen.

Quelle

2012-09-25 Andrew Mao

Ein Weg: http://www.webdevout.net/test?01v&raw (das heißt, die Schicht ein Element mit einer Farbe hintereinander mit eine andere Farbe [in Form eines gestrichelten Strichs]) – reisio

Was Reisio gesagt hat, scheint die bisher beste und sicherste Antwort zu sein. Die Lösung von Duopixel scheint ein größeres Potenzial für Fehler zu haben, wenn der Browser etwas falsch macht. Möchtest du deinen Kommentar in eine Antwort umwandeln? –

Das mit nur einem Element nicht möglich in SVG ist, aber man zwei verschiedene Rects und dann eine 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/

Quelle

2012-09-25 03:48:29 Duopixel

Ihre Antwort ist gut, aber ich werde darauf hinweisen, dass ich die Implementierung in dem obigen Kommentar - Rechteck mit durchgezogener Linie hinter einem Rechteck mit gestrichelter Linie - für weniger fehleranfällig bevorzugen. Es scheint, als könnte der 'stroke-dashoffset' zu lustig aussehenden Rechtecken führen, wenn das CSS etwas aus war oder der Browser die Striche an verschiedenen Stellen startete. –

+1 für die Verwendung von Svg anstelle von HTML –

Ich denke, wenn der Browser die Bindestriche an verschiedenen Orten beginnt, das ist ein Browser-Fehler, und wenn die CSS leicht aus ist, werden Sie die gleichen Probleme mit der Lösung von @reisio haben . Diese Antwort funktioniert jedoch für Browser, die SVG nicht unterstützen. –

-3

Für eine Grenze, die 50 hat anwenden können Striche entlang der Unterseite, erstellen Sie 50 Divs mit zunehmenden margin-left, und einen Gesamtcontainer mit overflow:hidden.

Quelle

2012-09-30 00:28:57 eddieberklee

Ein Weg:

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

ist, dass die Schicht ein Element mit einer Farbe hintereinander mit einer anderen Farbe [in Form einer gestrichelten Hub].

Quelle

2012-11-17 21:03:46 reisio

Aufbauend auf der Antwort von @duopixel, können Sie die stroke-dasharray Eigenschaft verwenden, um ein ziemlich komplexen Muster mit mehreren Farben aufzubauen:

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

Siehe http://jsfiddle.net/colin_young/Y38u9/ zeigen Linien und einen Kreis mit dem zusammengesetzten Strichmuster.

aktualisiert mit SO Schnipsel:

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>

Quelle

2013-03-22 19:29:38

SVG/CSS Strich gestrichelte Linie mit zwei Farben - ist das möglich?

Antwort

Verwandte Themen