Есть ли способ заполнить изображение в SVG с помощью CSS?

Question

Точно так же, как стили CSS, такие как заливка и обводка, задаваемые с помощью CSS, есть ли способ установить изображение (background-image) для элемента SVG, используя только CSS?В некоторых существующих решениях есть тег <image> в элементе <svg>, но я не хочу его иметь, поскольку я использую стороннюю библиотеку, которая генерирует SVG, поэтому CSS кажется хорошей альтернативой.

Обновление: я хотел бы добавить background к определенному svg элементу, а не ко всему SVG.Не понимал, что это не было упомянуто в настоящем вопросе ранее.

Answer 1

Я думаю, что единственный способ, которым вы можете делать то, что вы хотите, - это определить ваши заливки по шаблону в отдельном SVG.Затем вы можете назначить эти предопределенные шаблоны с помощью CSS.

Демо:

.filled {
  fill: url(#image-fill);
}

<svg width="0" height="0">

  <!-- image fills defined here in this hidden SVG -->
  <defs>
    <pattern id="image-fill"
             patternContentUnits="objectBoundingBox" width="1" height="1">
      <image x="0" y="0" width="1" height="1" preserveAspectRatio="xMidYMid slice"
             xlink:href="https://placekitten.com/400/400"/>
    </pattern>
  </defs>

</svg>



<svg viewBox="0 0 500 500">
  <path class="filled" d="M 100,50 L 450,200 L 150,350 Z" stroke="grey"/>
</svg>

Answer 2

Просто добавьте его через CSS.Запустите фрагмент, чтобы увидеть, как он работает:

svg{
  background: url("https://www.fillmurray.com/79/79");
}

<svg width="400" height="160" viewBox="0 0 400 160">
  <circle cx="200" cy="80" r="30" fill="red" stroke="white" stroke-width="4"></circle>
</svg>