如何将 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>