Remplir SVG élément de chemin avec un background-image

Est-il possible de définir un background-image pour un SVG <path> élément?

Par exemple, si j'ai mis l'élément class="wall", le style CSS .wall {fill: red;} fonctionne, mais .wall{background-image: url(wall.jpg)} n'est pas, ni .wall {background-color: red;}.

  • Montrant comment définir l'image d'arrière-plan pour le SVG texte, éventuellement par caractère: stackoverflow.com/a/10853878/405017
  • pour ceux qui recherchent un peu plus profond d'informations, consultez cet article lien
InformationsquelleAutor jbochi | 2010-09-25
  1. 238

    Vous pouvez le faire en rendant l'arrière-plan dans un modèle:

    <defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>

    Ajuster la largeur et la hauteur en fonction de votre image, puis de référence à partir du chemin comme ceci:

    <path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
  fill="url(#img1)" />

    Exemple de travail

    • très belle, est-ce de travailler avec des images en base64 trop? au lieu de wall.jpg quelque chose comme data:image/png;base64,iVBORw0KGgoAA comme vous le feriez dans la normale CSS?
    • Je ne sais pas, essayez et vous verrez.
    • J'ai essayé et ça ne fonctionne pas, mais j'ai eu un double élément de style. Par élimination, il a très bien fonctionné;)
    • J'ai une question au sujet de votre réponse. Le modèle commence au mondial de coordonnées (0,0). Est-il possible de laisser le motif de l'utilisation du système de coordonnées local de l'objet connecté? Je veux dessiner un rectangle à différents endroits dans mon fichier svg et ce qui se passe, c'est que le motif est répété dans le trou à l'arrière-plan et les objets sont utilisés comme des masques.
    • Je vous suggère de poser votre propre question.
    • C'est vraiment une réponse utile, surtout si vous travaillez avec d3.js ou en d'autres libs. Upvoted parce que merde, il m'a sauvé.
    • Malheureusement TCPDF ne prend pas en charge le format SVG Modèles, comme je l'ai imaginer d'autres programmes qui n'ont pas encore le plein SVG2 de soutien ne sont pas non plus.
    • J'ai une question. Est-il possible d'avoir l'image de couverture de la surface de de la chemin? au lieu de saisir manuellement la largeur et la hauteur.
    • veuillez mettre à jour votre réponse à mentionner que xlink:href est obsolète depuis SVG 2 et pour tout simplement utiliser href maintenant. developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href

    InformationsquelleAutor robertc
  2. 13

    La réponse par "robertc" est le svg - et ceci est similaire à ce qui est utilisé par d3.js chemin d'accès du code. J'ai réussi à créer des dynamiques de def pour d3.js les chemins par l'application de la suivante.

    J'ai réussi à le faire fonctionner en le définissant comme le suivant

    chart.append("defs")
     .append('pattern')
     .attr('id', 'locked2')
     .attr('patternUnits', 'userSpaceOnUse')
     .attr('width', 4)
     .attr('height', 4)
     .append("image")
     .attr("xlink:href", "locked.png")
     .attr('width', 4)
     .attr('height', 4);
    • est-ce d3.js ? si oui, vous devriez le mentionner parce que c'est pas dans la question tags
    • Eh bien, je n'ai pas écrit la question? J'ai fait une recherche pour le code trouvé sur cette page. Elle équipée du projet de loi et qui semblait fonctionner pour moi.
    • Je sais que vous n'écrivez pas la question. Le questionner demande svg solutions et vous êtes dumping code javascript. Il n'est même pas pur javascript si vous avez utilisé une sorte de bibliothèque. Je la soupçonne d'être en d3. Mais quand un utilisateur aléatoire vient dans votre réponse, il est inutile parce qu'il n'ont aucune idée de comment l'utiliser. Je vais voter ce vers le bas jusqu'à ce que vous avez élaboré.
    • Bien que je ne comprends pas parce que "robertc" a mis le code qui est d3.js. J'ai répondu avec un appui de réponse pour le code qui a travaillé pour moi quand il est venu à appliquer une texture à d3.js objets. Pour rendre les choses plus claires pour vous - il a appliqué les "def" du code. J'ai appliqué dans un sens dynamique de la manière dont il est construit par js. Je'e édité par message pour indiquer qu'il est d3.js? Puis-je obtenir mon upvote dos
    • La réponse par robertc est de la pure SVG et ne contient pas de d3.js code
    • Il est dérivé à partir d'un chemin d'accès de l'objet qui vient de d3.js. Oui c'est le code svg. Ce qui est avec vous les gars, si mesquine - son code de travail qui était très bien il y a 6 mois avec 2 upvotes
    • Robert Longson - il peut être pur code SVG - mais ce que j'ai fournies sont pertinentes pour les mêmes svg manipulation d3.js - j'ai donné un exemple dans d3.js comme je suis tombé sur ce post comme le svg a été quasi identiques

    InformationsquelleAutor The Old County