爲什麼這個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中作爲背景圖像工作？

回答

相關問題