如何在SVG中添加png背景图像和填充颜色？

Question

我知道这对于常规html元素是可行的，并且我知道如何将填充颜色或背景图像添加到SVG。但这两种可能吗？我只是想为这些背景（填充）颜色添加滤镜效果。

x: function()

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>