javascript - 如何将 png 背景图像和填充颜色添加到 SVG？

Question

我知道这对于常规 html 元素是可行的，而且我知道如何向 SVG 添加填充颜色或背景图像。但是两者都有可能吗？我只是想为这些背景(填充)颜色添加滤镜效果。

.element {
  background-color: rgba(0,0,0,.1);
  background-image: url('images/filter/grunge.png');
}

Answer 1

你的问题不清楚。

你是说这样吗？

svg {
  background-color: blue;
  background-image: url(http://lorempixel.com/300/200/);
  background-repeat: no-repeat;
  filter: blur(3px);
}

<svg width="400" height="200">
  <circle cx="100" cy="100" r="50" fill="red"/>
</svg>