Utilisation de SVG et dégradés comme remplissage

Utilisation de SVG et dégradés

J’ai essayé d’externaliser mes icônes SVG dans un fichier et de les référencer avec un balisage comme <svg><use xlink:href= »file.svg#icon » /></svg>. En théorie, cela fonctionne très bien, mais différents navigateurs ont des problèmes de rendu. Tous les navigateurs sont capables de restituer correctement le svg en référençant le symbole avec <use> à l’intérieur du fichier et en ouvrant directement l’url du fichier svg.

En bref, existe-t-il un moyen multi-navigateur de faire en sorte que SVG linearGradients fonctionne comme remplissage pour les éléments lors du référencement des symboles avec <svg><use/></svg> dans le balisage ?

J’ai mis en place un plunker démontrant le problème : http://plnkr.co/edit/feKvZ7?p=preview

Simplifié, le balisage est le suivant :

<!DOCTYPE html>
    <html>
      <body>
        <h1>SVG sprite test</h1>
        <svg width="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
          <use xlink:href="icon.svg#icon" />
        </svg>
      </body>
    </html>

Et le fichier SVG ressemble à ceci :

  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient id="gradient">
          <stop offset="0" stop-color="black" />
          <stop offset="1" stop-color="white" />
        </linearGradient>
      </defs>
      <symbol id="icon" viewBox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="black" fill="url(#gradient)" />
      </symbol>
    
      <use id="iconuse" xlink:href="#icon" width="100" height="100" />
    
    </svg>

J’ai abandonné cette approche et j’utilise aujourd’hui des trucs comme svgr : https://github.com/azienda-solution/svg. Cela pourrait être un moment intéressant à revisiter, cependant. En jetant un rapide coup d’œil au Plunkr, il existe encore des différences entre les navigateurs dans la façon dont ils rendent les différents SVG

Autre Méthode

La balise de symbole est utilisée pour masquer les éléments qui s’y trouvent. Les éléments à l’intérieur du symbole sont appelés à l’aide de la commande <use> par leur indicateur unique.
Par conséquent, il est préférable d’utiliser cette méthode d’appel d’éléments individuels plutôt que d’appeler le symbole entier

De plus, les éléments lors de l’utilisation de <use> tombent dans le shadow DOM et l’utilisation de CSS dans certains cas devient impossible
Par conséquent, il est préférable de supprimer tous les styles internes à l’intérieur du symbole et de les affecter directement à la commande use

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="gradient">
      <stop offset="0" stop-color="black" />
      <stop offset="1" stop-color="white" />
    </linearGradient>
  </defs>
  <symbol  id="icon"  viewBox="0 0 100 100"> 
    <circle id="circle" cx="50" cy="50" r="40"   />
     <rect id="rect" x="100" y="10" width="100" height="100" />
  </symbol>

  <use class="iconuse" xlink:href="#circle" width="100" height="100" fill="url(#gradient)" stroke="black" />
     <use class="iconuse" xlink:href="#rect" width="100" height="100" fill="url(#gradient)" />
</svg>

Cela ne faisait que pointer vers votre description d’origine : « il est préférable d’utiliser cette méthode d’appel d’éléments individuels plutôt que d’appeler le symbole entier ». Quoi qu’il en soit, la question initiale concernait le pointage vers un élément avec un identifiant dans un fichier SVG externe. Ne pointant pas vers des éléments à l’intérieur d’une définition SVG en ligne.

 521 total views,  2 views today

Add a Comment

Your email address will not be published.