Remplacement d'une balise <hr/> par un SVG

Bonjour,

Je cherche la meilleure manière de mettre un SVG sur un <hr>. Auparavant je mettais une image sur un pseudo élément, mais là je veux mettre un svg et je veux pouvoir le styliser au besoin.

J'ai donc opté pour un remplacement via js du hr par un sprite SVG avec le rôle "separator". Voici mon prototype : CodePen

Avez-vous des suggestions d'amélioration ? Une solution plus élégante le cas échéant, à côté de laquelle je serais passé ?

Notez que j'ai prévu une solution de repli en CSS.

Ça fonctionne effectivement en CSS, mais le SVG ainsi appelé ne sera pas stylable. Je viens même de switcher de la solution sprite SVG au profit d'un clone SVG. Ce sera encore plus stylable que le simple fait de pouvoir changer de couleur (plus de limitation shadow-root).

Bonjour,

Olivier C a écrit :
Ça fonctionne effectivement en CSS, mais le SVG ainsi appelé ne sera pas stylable.

C'est clairement le point crucial.

Après, dans le css, tu peux faire un background avec un svg défini via un data-url, et qui aurait sa propre feuille de style. Pas forcément très lisible, mais du coup le svg est "stylable" sans avoir besoin de js.

Exemple (à mettre dans une feuille de style à part, car en inline dans la page html, ça marche pas à cause de la balise <style></style> du svg) :

hr {
  display: block;
  border: 0;
  height: 5em;
  background-image: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg"><style><![CDATA[path{stroke:red;}]]></style><circle fill="none" stroke="black" stroke-width="4" cx="64" cy="64" r="48"/><circle fill="black" cx="48" cy="48" r="8"/><circle fill="black" cx="80" cy="48" r="8"/><path fill="none" stroke="black" stroke-width="4" d="M44,78A32 32 0 0 0 84,78"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

Amicalement,
Modifié par parsimonhi (07 Nov 2020 - 17:05)

Bon et bien finalement je me contente de reprendre la bonne vieille technique du pseudo élément auquel on définit un content. J'ai juste un peu modernisé le truc en passant un attribut data dans le content qui me permet d'afficher les caractères que je souhaite :

hr[data-hr]::after {
  content: attr(data-hr);
}

Je garderais les SVG inline pour un contenu réel.
Modifié par Olivier C (28 Nov 2020 - 10:16)