如何在SVG中的文本上获得轮廓效果? [英] How to get an outline effect on text in SVG?

问题描述

我只想要一个简单的SVG图像，该图像在某个角度上具有一些任意文本，我可以这样做.事实是，我还希望文本具有某种轮廓"效果.与实心D相似，字母D的内边缘和外边缘用指定厚度的线绘制，而D的其余部分根本没有绘制，因此看起来几乎是空心".

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".

SVG可以这样做吗?

Can SVG do this?

推荐答案

是的；-)

我试图通过 Inkscape 意识到这一点，然后编辑了svg-File的源代码. 只是不要填充它，而是使用带有颜色和宽度的笔触来绘制它. 我明白了:

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;"

这篇关于如何在SVG中的文本上获得轮廓效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！