嘿,我有一张图片想添加到 svg 圆圈中,但我必须使用外部 CSS 来实现。我不太清楚该怎么做。我试过添加背景图像,但这不起作用。我也试过 fill: url(#"image.png")。它必须是 svg,因为它是我拥有的使用 svg 的 javascript 游戏。请帮忙!
最佳答案
无法使用任意图像 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>
关于javascript - 尝试使用 css 将图像添加到 SVG 圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41205097/