svg作为css的background,导致fill不支持十六进制?

下面的代码中,我把svg作为css的background,发现fill属性如果写blue之类的单词,会显示正确的颜色,但换成十六进制,如#acd123,就无效.
但是如果把相同的svg写在body里面,即作为html标签使用,fill里写十六进制的颜色,能正确显示相应颜色.
所以问题来了,把svg作为css背景的情况下,svg下的rect的fill如何才能支持十六进制颜色的写法?

.svg{
  box-sizing: border-box;
  width: 100px;
  height: 100px;

 background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' fill='blue' rx='15' stroke='red' /></svg>");
}
  <div class="svg">svg的fill颜色</div>

css svg

阅读 1.3k

AI BotBETA

在CSS中，当SVG用作背景图像时，它被视为一个图像，而不是一个可交互的SVG文档。因此，CSS不会解析或处理SVG内部的任何属性，包括fill。当你使用fill='blue'时，它之所以有效，是因为CSS可以识别和处理颜色名称。但是，当你尝试使用十六进制颜色代码（如#acd123）时，CSS无法识别并应用该颜色，因为它将其视为普通的文本，而不是有效的颜色值。

为了解决这个问题，你可以在SVG文件本身中预定义颜色，并在CSS中引用该SVG文件。然后，你可以使用CSS变量或内联样式来更改SVG中元素的颜色。以下是一个示例：

首先，将SVG保存为一个单独的文件（例如my-svg.svg），并确保其内部的rect元素具有一个唯一的ID或类名，以便在CSS中引用它。

<!-- my-svg.svg -->
<svg xmlns='http://www.w3.org/2000/svg'>
  <rect id="my-rect" width='100%' height='100%' fill='var(--fill-color)' rx='15' stroke='red' />
</svg>

在你的CSS中，定义一个颜色变量，并将其设置为所需的十六进制颜色值。然后，将该变量用作SVG背景，并使用fill属性将其应用于rect元素。

:root {
  --fill-color: #acd123;
}

.svg {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  background: url("my-svg.svg");
  background-size: cover;
}