结合背景颜色和图像的形状

Question

我想为SVG <path>设置此样式：

background-color: red;
background-image: url('myImage.png');

这张照片有透明像素，我需要背景色来填充它。

Answer 1

你在SVG中做的是定义一个<pattern>，其中包含一个你想要颜色的矩形和你想要的图像，然后用它作为<path>的填充。

请参阅SVG测试套件中的this example。

'background-image'和'background-color'不适用于svg内容，除非它由CSS盒子模型处理（所以基本上只是root svg元素）。

Answer 2

我有理由相信你不能在一条路径上拥有背景色的图像。

然而，您可以通过在同一位置放置两条路径来复制效果，图像路径位于纯色路径的顶部。