Заполните элемент пути SVG фоновым изображением - PullRequest
154 голосов
/ 26 сентября 2010

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

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

Ответы [ 2 ]

238 голосов
/ 26 сентября 2010

Вы можете сделать это, превратив фон в шаблон :

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

Рабочий пример

13 голосов
/ 11 декабря 2013

Ответом "robertc" является svg - и это похоже на то, что используется путевым кодом d3.js. Мне удалось создать динамические определения для путей 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);
...