在 css 中使用 svg 模式答案

【问题标题】：Use svg pattern in css在 css 中使用 svg 模式
【发布时间】：2018-12-13 01:36:57
【问题描述】：

我在这里有一个密码 - https://codepen.io/mt-ttmt/pen/vvOoJe

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

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

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

如何使用 svg 模式作为 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");   

}

【问题讨论】：

背景图像 SVG 不绘制任何内容。这只是模式定义。正如@ccprog 指出的那样，您必须将其实际应用于矩形或其他东西。

标签： css svg

【解决方案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>");   

}

&lt;div class="block"&gt;&lt;/div&gt;

【讨论】：