Línea de trazo de trazo SVG/CSS con dos colores: ¿es posible?

¿Es posible usar CSS para definir una línea (o borde de forma) con dos colores alternos que son discontinuos? Es decir, si 1 y 2 son diferentes píxeles de colores, entoncesLínea de trazo de trazo SVG/CSS con dos colores: ¿es posible?

1212121212121212 o 112211221122

básicamente quiero alguna forma de utilizar accidente cerebrovascular-dasharray con dos colores. La línea en sí está completamente coloreada.

Si esto no es posible, ¿cuál es una buena forma de aproximarlo? Por ejemplo, podría crear un degradado lineal repetido con dos colores alternativos, pero sería difícil establecer los dos colores desde javascript.

Fuente

2012-09-25 Andrew Mao

Una manera: http://www.webdevout.net/test?01v&raw (es decir, capa de un elemento con un color detrás de otro con otro color [en forma de un trazo discontinuo]) – reisio

Lo que reisio dijo parece ser la mejor y más segura respuesta hasta el momento. La solución de Duopixel parece tener más potencial para errores si el navegador hace algo mal. ¿Te importa convertir tu comentario a una respuesta? –

Esto no es posible en SVG con un solo elemento, pero se puede usar dos rectas distintas y luego aplicar una demostración 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/

Fuente

2012-09-25 03:48:29 Duopixel

Su respuesta es buena, pero señalaré que prefiero la implementación en el comentario anterior - rectángulo de línea continua detrás de un rectángulo de líneas discontinuas - por ser menos propenso a errores. Parece que el 'stroke-dashoffset' podría dar como resultado rectángulos de aspecto gracioso si el CSS estuviera ligeramente apagado o el navegador comenzara con los guiones en diferentes lugares. –

+1 para usar svg en vez de html –

Creo que si el navegador está iniciando los guiones en diferentes lugares, es un error del navegador, y si el CSS está ligeramente apagado, tendrá los mismos problemas con la solución de @reisio . Sin embargo, esa respuesta funcionará para los navegadores que no son compatibles con SVG. –

-3

Para una frontera que tiene 50 guiones a lo largo de la parte inferior, crear 50 divs con un aumento de margin-left, y un contenedor general con overflow:hidden.

Fuente

2012-09-30 00:28:57 eddieberklee

Una manera:

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

Es decir, la capa de un elemento con un color detrás de otro con otro color [en la forma de un trazo discontinuo].

Fuente

2012-11-17 21:03:46 reisio

Sobre la base de la respuesta de @duopixel, se puede utilizar la propiedad stroke-dasharray para construir un patrón bastante compleja con múltiples colores:

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

Ver http://jsfiddle.net/colin_young/Y38u9/ líneas que demuestran y un círculo con el patrón de tablero compuesto.

Actualizado con SO fragmento:

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>

Fuente

2013-03-22 19:29:38

Línea de trazo de trazo SVG/CSS con dos colores: ¿es posible?

Respuesta

Cuestiones relacionadas