嘗試使用CSS將圖像添加到SVG圓

Question

嗨，所以我有一個要添加到svg圓中的圖像，但是必須使用外部CSS來添加。 我不太確定該怎么做。 我嘗試在其中添加背景圖像，但這不起作用。 我也嘗試過填充：url（＃“ 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-qc-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-qc-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>