У меня есть элемент с фоновым изображением, нарисованным с помощью 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.