定義済みのSVGパターンを使用するには、CSSで背景イメージをどのように設定できますか？

Question

HTML：

<svg> 
    <defs> 
    <svg-pattern-of-some-sort id="my-pattern" /> 
    </defs> 
</svg> 

<div class="box"></box> 

はCSS：

.box { 
    width: ...; 
    height: ...; 
    background-image: url(#my-pattern) 
} 

どのようにこの作業を行うことができますか？

アンSVG要素がfillとしてSVGパターンを使用することができ、かつbackground-imageは.svgを指すことができますが、どのようにあなたはそれが背景だとして（HTMLで書かれた）SVGを取るためにDOM要素を有効にする - 複素ベース64なし変換など？

Answer 1

あなたはCSSに直接SVGを使用することができます。

.box { 
    background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>'); 
} 

のBase64変換する必要は...もちろん、このような構文を理解することの問題といくつかのブラウザがあるでしょう。