Question

我发现这种奇怪的行为，当使用嵌入式svg作为背景图像时，填充属性内的十六进制颜色不起作用：

div {
  width: 40px;
  height: 40px;
  border: 1px dashed #000;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.first {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><polygon fill='#F00' points='0 0, 0 100, 50 66.7, 100 100, 100 0'></polygon></svg>");
}

.last {
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'><polygon fill='red'  points='0 0, 0 100, 50 66.7, 100 100, 100 0'></polygon></svg>");
}

not working (fill="#F00"):
<div class="first"></div>
working (fill="red"):
<div class="last"></div>

根据SVG规范（https://www.w3.org/TR/SVGColor12/#Color_syntax），应该使用3位数的十六进制颜色。

有什么想法吗？

PS：如果您遇到相同的问题，我注意到rgb（）语法可以正常工作

内联svg背景图像内的十六进制颜色不起作用

0 个答案: