Стилизация обводки SVG в псевдоатрибуте CSS content: url ()

Question

У меня есть SVG, который я импортировал с помощью

.nav-arrow::after {
    content: url(data:image/svg+xml;base64,xevr...);
}

Теперь я хочу определить цвет обводки с помощью CSS, который не работает. У вас есть идея, как импортировать SVG без HTML и при этом иметь возможность его стилизовать?

это мой SVG:

<svg class="nav-arrow" height="40" width="40">
    <g fill="#fff">
        <path stroke="#a01b1b" stroke-width="2" d="M 0 5 L 20 20 L 0 35" />
    </g>
</svg>

Answer 1

В этом конкретном случае вы можете использовать SVG в качестве маски и настроить цвет фона:

.box {
   display:inline-block;
   width:40px;
   height:60px;
   position:relative;
}

.box::before,
.box::after{
   content:"";
   position:absolute;
   top:0;
   left:0;
   right:0;
   bottom:0;
}
/* The stroke */
.box::after {
   background:var(--c,red);
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="5 0 10 40" height="40" width="40"><path fill="transparent" stroke="black" stroke-width="2" d="M 0 5 L 20 20 L 0 35" /></svg>') center/contain no-repeat;
           mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="5 0 10 40" height="40" width="40"><path fill="transparent" stroke="black" stroke-width="2" d="M 0 5 L 20 20 L 0 35" /></svg>') center/contain no-repeat;
}
/* The fill */
.box::before {
    background:#f1f1f1;
   -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="5 0 10 40" height="40" width="40"><path d="M 0 5 L 20 20 L 0 35" /></svg>') center/contain no-repeat;
           mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="5 0 10 40" height="40" width="40"><path d="M 0 5 L 20 20 L 0 35" /></svg>') center/contain no-repeat;
}

<div class="box"></div>
<div class="box" style="--c:blue;"></div>
<div class="box" style="--c:green;"></div>