2015-10-07 8 views
5

ここでは、SVGをCSSの背景画像で使用できることがわかります。SVG <use>をCSSの背景イメージで使用できますか?

.icon { 
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="16" viewBox="0 0 64 16"> <circle fill="blue" cx="8" cy="8" r="8"/> <circle fill="red" cx="24" cy="8" r="8"/> <circle fill="yellow" cx="40" cy="8" r="8"/> <circle fill="green" cx="56" cy="8" r="8"/> </svg>'); 
background-repeat: no-repeat; 
background-size: auto 100%; 
display: inline-block; 
} 

ただし、<svg><use xlink:href="svg.svg#mySVG"></use></svg>を実装することはできますか?それは私のために無効なCSSですが、私はただ何か間違ったことをやっている可能性があります。

+0

イメージは単一のファイルに完全でなければなりません。 –

答えて

0

これはエラーなしW3Cバリやチェッカーに渡されます。また、我々は、CSSへのパスをspecifyigているとして、CSSクラスのURLは問題にならないだろう、それが有効か正しくなるまで、ブラウザはそれをレンダリングします。 `` 参照は、あなたがそれを持っているように、画像にしていない外部ファイルの内部でなければならないので、

関連する問題