为什么这个 svg 不能作为 CSS 中的背景图像？答案

【问题标题】：Why doesnt this svg work as a backgroud image in css?为什么这个 svg 不能作为 CSS 中的背景图像？
【发布时间】：2018-01-10 14:15:42
【问题描述】：

我使用 illustrator 和阅读 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>

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

【问题讨论】：

标签： html css svg

【解决方案1】：

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

如果你想让它工作，你需要将 jpg 文件转换为 data URI。

【讨论】：