試圖使用CSS添加圖像到SVG圈使用css

Question

嘿所以我有一個圖像，我想添加到svg圈，但我必須使用外部CSS。我不太確定如何去做。我曾嘗試添加背景圖片，但這不起作用。我也嘗試填充：網址（＃「image.png」）。它必須是一個svg，因爲它是一個使用svgs的JavaScript遊戲。請幫忙！

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>