it-swarm.com.de

Füllen Sie das SVG-Pfadelement mit einem Hintergrundbild

Ist es möglich, ein background-image Für ein SVG-Element <path> Festzulegen?

Wenn ich zum Beispiel das Element class="wall" Setze, funktioniert der CSS-Stil .wall {fill: red;}, Aber .wall{background-image: url(wall.jpg)} nicht und auch nicht .wall {background-color: red;}.

154
jbochi

Sie können dies tun, indem Sie den Hintergrund in ein Muster umwandeln :

<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>

Passen Sie die Breite und Höhe an Ihr Bild an und verweisen Sie dann wie folgt auf den Pfad:

<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)" />

Arbeitsbeispiel

239
robertc

Die Antwort von "robertc" lautet "svg" - und dies ist vergleichbar mit dem Pfadcode von "d3.js". Ich habe es geschafft, dynamische Defs für d3.js-Pfade zu erstellen, indem ich Folgendes angewendet habe.

Es gelang mir, es zum Laufen zu bringen, indem ich es wie folgt definierte

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);
14
The Old County