Question

我这里有一个svg模式

它输出svg，但不显示图案

应该是对角线。

没有显示图案的原因。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="400px" width="400px">
    <defs>
        <pattern
            id="diagonalHatch"
            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>
</svg>

Answer 1

如果需要将其用作CSS中的背景，则需要将SVG转换为data-uri图像。同样，在css中，除非设置background-repeat:none，否则背景图像会以图案重复。您真正需要的是一个小型的SVG，它可以重复成一个模式

.bg {
  width: 400px;
  height: 400px;
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20'%3E%3Cpath stroke='red' stroke-width='1' id='squares' d='M5 0 L0 5 m0 5 L10 0 m 5 0 L0 15 m0 5 L20 0 m0 5 L5 20 m5 0 L20 10 m0 5 L15 20' /%3E%3C/svg%3E");
  border: 1px;
}

svg{border:1px solid

<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' height='20' ><path  stroke='red' stroke-width='1' id='squares' d='M5 0 L0 5 m0 5 L10 0 m 5 0 L0 15 m0 5 L20 0 m0 5 L5 20 m5 0 L20 10 m0 5 L15 20' /></svg>


<div class="bg"></div>

为了获取数据uri，我建议https://codepen.io/yoksel/pen/JDqvs

FD或如何做的解释，您可以阅读Optimizing SVGs in data URIs

模式svg显示在页面上，但模式不显示

1 个答案: