Используйте шаблон SVG в CSS

Question

У меня здесь есть codepne - https://codepen.io/mt-ttmt/pen/vvOoJe

Я использовал CSS Cssill, чтобы добавить этот шаблон в качестве заливки в другой SVG.

Мне также нужно использовать тот же шаблон в качествеbackground в div.

Я URL-кодировал шаблон svg и использовал его как background-image для div, но шаблон не отображает show.

Как использовать svgpatteren в качестве фона div.

.block{
  border: 1px solid lightgrey;
  height: 66px;
  width: 200px;
          background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='4' width='4' %3E%3Cdefs%3E%3Cpattern id='diagonalHatching' width='3' height='3' patternTransform='rotate(45 0 0)' patternUnits='userSpaceOnUse'%3E%3Cline x1='4' x2='4' y1='0' y2='10' style='stroke:red; stroke-width:5' /%3E%3C/pattern%3E%3C/defs%3E%3C/svg%3E");   

}

Answer 1

Вы можете нарисовать прямоугольник на фоновом изображении и установить его ширину / высоту, такую ​​же, как у элемента <svg>, на 100%.Содержимое данных URI будет выглядеть следующим образом:

<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
  <defs>
    <pattern id="diagonalHatching" width="3" height="3" patternTransform="rotate(45 0 0)" patternUnits="userSpaceOnUse">
      <line x1="4" x2="4" y1="0" y2="10" style="stroke:red; stroke-width:5"/>
    </pattern>
  </defs>
  <rect width="100%" height="100%" fill="url(#diagonalHatching)"/>
</svg>

Применительно к div:

.block{
  border: 1px solid lightgrey;
  height: 66px;
  width: 200px;
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='100%' width='100%'><defs><pattern id='diagonalHatching' width='3' height='3' patternTransform='rotate(45 0 0)' patternUnits='userSpaceOnUse'><line x1='4' x2='4' y1='0' y2='10' style='stroke:red; stroke-width:5'/></pattern></defs><rect width='100%' height='100%' fill='url(%23diagonalHatching)'/></svg>");   

}

<div class="block"></div>