为什么这个svg在css中作为背景图像工作？

我做了使用Illustrator和这个.SVG读取Crop to fit an svg pattern：为什么这个svg在css中作为背景图像工作？

<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; 
}

它可见。

但是如果我设置为的.svg使用该CSS背景图片：

.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>

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

来源

2017-08-03 Magearlik

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

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

来源

2017-08-03 06:39:16

是的，这就是它。欢呼你的帮助。 – Magearlik

为什么这个svg在css中作为背景图像工作？

回答

相关问题