web-dev-qa-db-fra.com

Comment ajouter une bordure / contour / trait aux éléments SVG en CSS?

J'injecte des éléments SVG dans une page Web grâce à D3js. J'ai du mal à styliser ces éléments car des syntaxes comme

path { border: 3px solid green; }

ne fonctionne pas.

Comment ajouter une bordure/contour/trait à des éléments SVG dans des pages Web avec CSS?

csssvgd3.jsborder
17
Hugolpz

En CSS, quelque chose comme:

path {
  fill: none;
  stroke: #646464;
  stroke-width: 1px;
  stroke-dasharray: 2,2;
  stroke-linejoin: round;
}

Modifier: faute de frappe

25
Hugolpz

Essayez d'ajouter des ombres portées.

Il ne semble pas aussi propre ici que dans mes codepens, mais pourrait toujours être utile.

svg {
  filter: drop-shadow(1px 1px 0px #111) drop-shadow(-1px 1px 0px #111) drop-shadow(1px -1px 0px #111) drop-shadow(-1px -1px 0px #111);
}

.arr {
  fill: none;
  stroke: #5457ff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
<svg height="45" width="40">
  <g class="arr"><path d="m 5 20 l 15 -15 l 15 15 m -15 0 l 0 20"/></g>
</svg>
3
Souleste

Pour la question: Comment ajouter une bordure/contour/trait aux éléments SVG dans les pages Web avec CSS?

Vous pouvez faire en CSS:

path { outline: 3px solid green; }

Veuillez noter qu'à partir de 2018, il est pris en charge par chrome et safari, mais peut ne pas être disponible sur tous les navigateurs modernes. Voir l'exemple ci-dessous:

J'ai appliqué le plan via CSS à un <g> groupe avec des chemins à l'intérieur. En statique, ça a l'air bien. En dynamique (glisser) je peux voir périodiquement ces artefacts (à gauche)

enter image description here

METTRE À JOUR:

  • si le contour est "solide" - il n'y a pas d'artefacts
  • safari mobile ne prend pas en charge les contours sur <g> éléments...
3
Sergey Rudenko