Question

我有一个元素，带有使用SVG绘制的背景图像：

div {
  width: 100px;
  height: 100px;
  background: no-repeat center center url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='none' width='723' height='569' viewBox='0 0 723 569'%3e%3cpath d='M703.969 241.602L703.963 241.599C716.081 262.97 723 287.677 723 314C723 382.917 675.575 440.757 611.58 456.665L246.7 556.937C226.465 564.729 204.481 569 181.5 569C81.2603 569 0 487.74 0 387.5C0 353.244 9.49023 321.204 25.985 293.867L25.9688 293.875L141.512 77.5476C162.753 33.3052 207.123 2.2726 258.951 0.119583L258.959 0H264.719H390.999H508.5H509.999L510.002 0.00999319C551.85 0.567328 588.083 24.388 606.358 59.1292L606.359 59.125L703.969 241.602Z' fill='green'/%3e%3c/svg%3e") / 100% auto;
}

<div></div>

问题是我必须在background-image属性内对内联模糊颜色进行硬编码。我尝试将其替换为currentColor，以将其设置为color属性，或者将inherit设置为具有fill属性。但是，以上方法均无效。我不想使用CSS变量，因为我必须支持较旧的IE。

在SVG背景中使用“ currentColor”或“继承”

0 个答案: