Question

CSSでbackground-image SVGをターゲティングすることはできますか？

.color { 
    background-color: #fff; 
    color: #fff; 
} 

.svg { 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 43'><path class='color' d='M 55.584673,43.175632 36.75281,22.967243 0,43.175632 40.42403,0 59.71135,20.208389 96,0 Z' /></svg>"); 
} 

Answer 1

以下に示すように、コードは正常に動作します。しかし、あなたがSVGイメージを置くために使用しているのと同じ引用符をあなたのSVGに含める場合、問題が発生する可能性があります。url()。彼らは\"のように引用するか、または置き換える必要があります。また、Base64エンコーディングを使用してSVGイメージをエンコードすることも検討できますが、CSSサイズを大きくすることができます。

svg { 
 
    background-color: lightgrey; 
 
} 
 
.color { 
 
    fill: blue; 
 
} 
 

 
.svg-plain { 
 
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 43'><path class='color' d='M 55.584673,43.175632 36.75281,22.967243 0,43.175632 40.42403,0 59.71135,20.208389 96,0 Z' /></svg>"); 
 
} 
 

 
.svg-base64 { 
 
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA5NiA0Myc+PHBhdGggY2xhc3M9J2NvbG9yJyBkPSdNIDU1LjU4NDY3Myw0My4xNzU2MzIgMzYuNzUyODEsMjIuOTY3MjQzIDAsNDMuMTc1NjMyIDQwLjQyNDAzLDAgNTkuNzExMzUsMjAuMjA4Mzg5IDk2LDAgWicgLz48L3N2Zz4=") 
 
} 
 

 
.svg, svg { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    background-color: lightgrey; 
 
    margin: 5px; 
 
}

<div class="svg svg-plain"></div> 
 
<div class="svg svg-base64"></div> 
 
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 43'><path class='color' d='M 55.584673,43.175632 36.75281,22.967243 0,43.175632 40.42403,0 59.71135,20.208389 96,0 Z' /></svg>