Question

我使用插画家和阅读Crop to fit an svg pattern制作了.svg：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 149 172">
    <defs>
      <pattern id="img" width="1" height="1" patternContentUnits = "objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
        <image xlink:href="https://c1.staticflickr.com/7/6037/6254709876_af26f8425b_b.jpg" preserveAspectRatio = "xMidYMid slice"  width = "1" height = "1" />
      </pattern>
    </defs>
    <polygon  points="0.5 128.75 0.5 43.3 74.5 0.58 148.5 43.3 148.5 128.75 74.5 171.47 0.5 128.75" fill="url(#img)"></polygon>
</svg>

现在如果我在我的html中这样称呼它：

<object type="image/svg+xml" data="hexagon-bg.svg" class="svg-hexagon"></object>

使用这个CSS：

.svg-hexagon
{
    width: 10%;
    min-width: 150px;
}

可见。

但是，如果我使用此CSS将.svg设置为背景图像：

.svg-hexagon-bg
{
    width: 200px;
    height: 200px;
    background-size: cover;
    background-position: center center;
    background-image: url("hexagon-bg.svg");
}

然后在我的html中调用它：

<div class="svg-hexagon-bg"></div>

不可见。有人知道为什么吗。我希望将其显示为背景图像，以便以不同的分辨率将其更改为正方形。

Answer 1

如果您使用SVG作为背景图像（或任何其他图像上下文，例如通过img文件），它必须是自包含的，即它不能有任何外部引用，如外部CSS文件或在这种情况下外部jpg文件。

如果您希望这样做，则需要将jpg文件转换为data URI。

为什么这个svg不能用作css中的背景图像？

1 个答案: