当前位置:  开发笔记 > 前端 > 正文

如何在SVG中获得文本的轮廓效果?

如何解决《如何在SVG中获得文本的轮廓效果?》经验,为你挑选了4个好方法。

我只想要一个简单的SVG图像,它在一个角度上有一些任意文本,我可以做.事实上,我也希望文本具有某种"轮廓"效果.与固体D不同,字母D的内边缘和外边缘用指定厚度的线条绘制,而D的其余部分根本不绘制,以便看起来几乎"空心".

SVG可以这样做吗?



1> 小智..:

油漆顺序:中风; 在我正在研究的D3图表中为我创造了奇迹.

我的最后一句话:

.name-text {
    font-size:  18px;
    paint-order: stroke;
    stroke: #000000;
    stroke-width: 1px;
    stroke-linecap: butt;
    stroke-linejoin: miter;
    font-weight: 800;
}

我的来源(向下滚动一下):https: //svgwg.org/svg2-draft/painting.html#PaintOrderProperty



2> Xn0vv3r..:

是的,它可以 ;-)

我试图用Inkscape实现这一点,然后编辑了svg-File的源代码.只是不要填充它并使用颜色和宽度的笔划来绘制它.我明白了:


D


3> phk..:

您可以使用a ,更具体地说是以下组合:





  
  
  
    
    
  




  
    Example
  




4> codedread..:

SVG中的图形对象可以具有填充(默认为黑色)和笔划(默认情况下为无).如果要在文本上使用红色轮廓,请设置fill ="none"和stroke ="red".您可能还想调整stroke-width属性的值.

推荐阅读
农大军乐团_697
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有