Заполните элемент SVG path фоновым изображением

Question

Заполните элемент SVG path фоновым изображением

можно ли установить background-image для SVG <path> элемент?

например, если я выберите элемент class="wall", стиль CSS .wall {fill: red;} работает, а .wall{background-image: url(wall.jpg)} нет, ни .wall {background-color: red;}.

619 2

html css svg image background-image

2 ответов:

Comments

Ничего не найдено.

robertc · Accepted Answer · 2015-05-27 01:23:42

Вы можете сделать это, сделав фон в pattern:
<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>
отрегулируйте ширину и высоту в соответствии с вашим изображением, а затем ссылайтесь на него из пути следующим образом:
<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)" />
пример работающего

The Old County · Accepted Answer · 2015-05-27 01:20:55

ответ "robertc" - это svg-и это похоже на то, что используется d3.код пути js. Мне удалось создать динамический def для d3.пути js, применяя следующее.

мне удалось заставить его работать, определив его как следующий
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);