SVG/CSS course ligne en pointillés avec deux couleurs - est-il possible?

Est-il possible d'utiliser les CSS pour définir une ligne (ou d'une forme de pointe) avec deux couleurs alternées qui sont en pointillés? C'est, si 1 et 2 sont des pixels de couleurs différentes, puis

1212121212121212 ou 112211221122

En gros, j'ai besoin d'utiliser stroke-dasharray avec deux couleurs. La ligne elle-même est complètement de couleur.

Si ce n'est pas possible, ce qui est un bon moyen de rapprocher? Par exemple, je pourrais créer une répétition d'un dégradé linéaire avec deux couleurs alternées, mais ce serait difficile de définir les deux couleurs à partir de javascript.

D'une manière: webdevout.net/test?01v&raw (qui est, de la couche d'un élément de couleur avec un derrière l'autre avec une autre couleur [sous la forme d'un trait en pointillés])
Ce reisio dit semble être la meilleure et la plus sûre de réponse jusqu'à présent. Duopixel la solution semble avoir plus de potentiel pour screwups si le navigateur fait quelque chose de mal. L'esprit de la conversion de votre commentaire à une réponse?

OriginalL'auteur Andrew Mao | 2012-09-25

  1. 23

    Ce n'est pas possible en SVG avec un seul élément, mais vous pouvez utiliser deux différents rectangles et ensuite appliquer une 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;
}

    démo http://jsfiddle.net/aMCsY/

    Votre réponse est bonne, mais je vais souligner que je préfère la mise en œuvre dans le commentaire ci-dessus - ligne solide rectangle derrière une ligne en pointillés rectangle - pour être moins sujettes à l'erreur. Il semble que le stroke-dashoffset pourrait entraîner drôle à la recherche de rectangles si le CSS était légèrement hors ou dans le navigateur commencé les tirets dans des endroits différents.
    +1 pour l'utilisation de svg plutôt que de html
    Je pense que si le navigateur est à partir de la forme de tirets dans différents endroits c'est un bug lié au navigateur, et si le CSS est légèrement en dehors, vous allez avoir le même problème avec la solution de @reisio. Cependant, la réponse va travailler pour les navigateurs qui ne prennent pas en charge le format SVG.
    La première version était en fait mieux. @AndrewMao, la superposition des bandes sur le dessus d'une solide course bousille l'anti-aliasing. jsfiddle.net/rkzpC
    bon point. Choisi cette réponse 🙂

    OriginalL'auteur Duopixel

  2. 3

    :

    <!doctype html> 
<html> 
<head> 
<title></title> 
<style> 
div { 
width: 100px; 
hauteur: 100px; 
} 
.dashbox { 
border: 4px en pointillés bleu; 
background: orange; 
} 
.dashbox > div { 
background: white; 
} 
</style> 
</head> 
<body> 
<div class="dashbox"> 
<div></div> 
</div> 
</body> 
</html>

    Qui est, de la couche d'un élément de couleur avec un derrière l'autre avec une autre couleur [sous la forme d'un trait en pointillés].

    OriginalL'auteur reisio

  3. -3

    Pour une frontière qui a 50 pointillés sur le fond, la création de 50 divs avec l'augmentation de la margin-left, et un ensemble de récipient avec overflow:hidden.

    OriginalL'auteur eddieberklee