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

标签 svg

我只想要一个简单的 SVG 图像,在一个角度上有一些任意文本,我可以做到。问题是,我还希望文本具有某种“大纲”效果。而不是实心的D,字母D的内外边缘用指定粗细的线画出,D的其余部分根本不画,看起来几乎是“空心的”。

SVG 可以做到这一点吗?

最佳答案

绘画顺序:描边;在我正在处理的这个 D3 图表中为我创造了奇迹。

我的最终 CSS:

.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

关于svg - 如何在 SVG 中获得文本轮廓效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40646768/

相关文章:

javascript - HTML <div> 上的自定义剪切路径

javascript - 如何解释 raphael 中的 SVG <line>?

html - CSS:表格中每一行的水平滚动

javascript - C3.js填充曲线之间的区域

svg - 如何在 SVG 中指定字体系列

html - 如何为 SVG 多边形设置动画以进行填充?

javascript - SVG tspan 的outerHTML 替代方案

python - 使用 Python 高效地合并和减少多边形

css - 带 CSS 的 Sigmoid 曲线形状

css - 绘制一条在图像拉伸(stretch)时不会变粗的线