Menu
I just want a simple SVG image that has some arbitrary text on an angle, which I can do. Thing is, I also want the text to have a sort of "outline" effect. Like rather than a solid D, the inside and outside edges of the letter D are drawn with a line of a specified thickness and the rest of the D isn't drawn at all, so as to look almost "hollow".
Can SVG do this?
318
Sometimes we need to create text and adding the outline to the text. There are mainly two methods to create a border to the fonts which are listed below: Using text-shadow property. Using text-stroke property.
To create text SVG's in Inkscape you need to turn your text into a path. To do this just select your text and then go to “path” in the top menu bar and then choose “object to path”. This will turn your text into a path. From here you can click into each individual letter of your text and edit however you'd like.
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
176
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;" If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
