なぜこのsvgはCSSのバックグラウンドイメージとして機能しませんか？

Question

私はイラストレーターを使用してこの.SVGを作り、Crop to fit an svg patternを読んでから：

<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でそれを呼び出す場合：このCSSで

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

：

.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ファイルなどの他の画像コンテキスト）として使用する場合は、SVGを外部のCSSファイルなどの外部参照を持つことはできません。外部のjpgファイル。

これを動作させるには、jpgファイルをdata URIに変換する必要があります。