javascript - 尝试使用 css 将图像添加到 SVG 圆

Question

嘿，我有一张图片想添加到 svg 圆圈中，但我必须使用外部 CSS 来实现。我不太清楚该怎么做。我试过添加背景图像，但这不起作用。我也试过 fill: url(#"image.png")。它必须是 svg，因为它是我拥有的使用 svg 的 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>