How to get an outline effect on text in SVG?
Yes it can ;-)
I tried to realize that with Inkscape and then edited the source of the svg-File. Just don't fill it and use a stroke with color and width to draw it. I got that:
<text x="100" y="100" id="text2383" xml:space="preserve" style="font-size:56px;font-style:normal;font-weight:normal;fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:Bitstream Vera Sans">
<tspan x="100" y="100" id="tspan2385">D</tspan></text>
The interesting part is in the "style" attribute.
"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
paint-order: stroke; worked wonders for me in this D3 chart I'm working on.
My final css:
.name-text {
font-size: 18px;
paint-order: stroke;
stroke: #000000;
stroke-width: 1px;
stroke-linecap: butt;
stroke-linejoin: miter;
font-weight: 800;
}
My source (scroll down just a bit): https://svgwg.org/svg2-draft/painting.html#PaintOrderProperty