css - 在 css 中使用 svg 模式

Question

我这里有可待因 - https://codepen.io/mt-ttmt/pen/vvOoJe

我已经使用 css fill 将此模式添加为另一个 svg 中的填充。

我还需要在 div 中使用与背景相同的图案。

我已经对图案 svg 进行了 url 编码，并将其用作 div 的背景图像，但图案不显示。

如何使用svg patteren作为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>