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

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

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

ОТВЕТЫ

Ответ 1

Вы можете сделать это, создав фон в 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)" />

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

Ответ 2

Ответ "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);

Ответ 3

Если ваш svg является единственным цветом, лучшим способом является преобразование SVG в файлы шрифтов.

Вы можете использовать icomoon.io инструмент, чтобы согласовать все ваши SVG файлы с файлами шрифтов и использовать их в качестве классов значков шрифтов, например Fontawesome.