Wypełnij element ścieżki SVG obrazkiem tła

Question

Wypełnij element ścieżki SVG obrazkiem tła

Czy można ustawić background-image dla elementu SVG <path>?

Na przykład, jeśli ustawiłem element class="wall", styl CSS .wall {fill: red;} działa, ale .wall{background-image: url(wall.jpg)} nie działa, ani .wall {background-color: red;}.

134

html image css background-image svg

Author: Simon East, 2010-09-26

Source

2 answers

ODPOWIEDŹ przez "robertc" to svg - i to jest podobne do tego, co jest używane przez d3.kod ścieżki js. Udało mi się stworzyć dynamiczne def ' y dla d3.ścieżki js, stosując następujące.

Udało mi się go uruchomić, definiując go jako następujące

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

13

Author: The Old County,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-26 22:20:55

score 215 · Accepted Answer

Możesz to zrobić, wykonując tło w wzór :

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

Dostosuj szerokość i wysokość zgodnie z obrazem, a następnie odwołaj się do niego ze ścieżki w następujący sposób:

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

Przykład roboczy