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
Author: Simon East, 2010-09-26
2 answers
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)" />
215
Author: robertc,
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:23:42
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:23:42
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
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