1141 sujets

Accessibilité du Web

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é ?
Modérateur
Et l'eau,

En css ça devrait fonctionner (background-image, display block, height, background-position, background-size). Je ne suis pas sûr qu'utiliser le js soit pertinent.
Modérateur
Bonjour,

Avec js, ce que tu as fait me semble être une possibilité raisonnable (je n'ai cependant pas vérifié dans le détail).

Mais bon, je préfère les solutions en mettant le svg en background du hr via css (même si, je te l'accorde, ça laisse moins de liberté pour styler).

Amicalement,
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).
Modérateur
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)
Merci Parcimonhi, je connaissais cette méthode. Mais bon, pour les SVG complexes ça fait un gros volume à placer dans les feuilles de styles.