cssを使用してSVGサークルに画像を追加しようとしています

Question

ちょっと、私はsvgサークルに追加したい画像がありますが、外部CSSを使用する必要があります。私はそのようにする方法はあまりよく分かりません。私は背景画像を追加しようとしましたが、うまくいきません。私もfill：url（＃ "image.png"）を試みました。それは私がsvgsを使用しているjavascriptのゲームなので、svgでなければなりません。助けてください！

Answer 1

任意の画像URLを使用してこれを行う方法はありません。

あなたが本当にできることは、指定された背景の選択を切り替えることです。一例として、我々は円のそれぞれに異なる背景パターン付与された以下のデモに：/：

#circle1 { 
 
    fill: url(#myPattern1); 
 
} 
 

 
#circle2 { 
 
    fill: url(#myPattern2); 
 
}

<svg width="200" height="100"> 
 
    <defs> 
 

 
    <pattern id="myPattern1" patternUnits="userSpaceOnUse" 
 
      width="100" height="100"> 
 
     <image href="http://lorempixel.com/output/cats-q-c-100-100-1.jpg" 
 
      x="0" y="0" width="100" height="100" /> 
 
    </pattern> 
 

 
    <pattern id="myPattern2" patternUnits="userSpaceOnUse" 
 
      width="100" height="100"> 
 
     <image href="http://lorempixel.com/output/cats-q-c-100-100-3.jpg" 
 
      x="0" y="0" width="100" height="100" /> 
 
    </pattern> 
 

 
    </defs> 
 

 
    <circle id="circle1" cx="50" cy="50" r="50" /> 
 
    <circle id="circle2" cx="150" cy="50" r="50" /> 
 

 
</svg>