Question

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

SVG可以这样做吗？

Answer 1

绘画顺序：笔画;在我正在研究的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

Answer 2

是的，可以; - ）

我尝试用Inkscape来实现，然后编辑了svg-File的源代码。只是不要填充它并使用颜色和宽度的笔划来绘制它。我明白了：

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

有趣的部分是“风格”属性。

"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"

Answer 3

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

Answer 4

您可以使用<filter>，更具体地说是<feMorphology>的组合：

<svg style="height:100px;width:100%;background-color:Green">

<defs>
<filter id="whiteOutlineEffect">
  <feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="2" />
  <feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="-1 0 0 1 0, 0 -1 0 1 0, 0 0 -1 1 0, 0 0 0 1 0"/>
  <feMerge>
    <feMergeNode in="WHITENED"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
</defs>

<g>
  <text x="10" y="50" fill="black" font-size="60" filter="url(#whiteOutlineEffect)">
    Example
  </text>
</g>

</svg>

您可能需要调整过滤器的x / y / width / height属性才能调整过滤器画布大小，另请参阅{{3 }或Humongous height value for <filter> not preventing cutoff。

我还创建了一个交互式Gaussian blur cutoff at edges支持的演示，用于比较此线程中提供的各种解决方案，并提供各种设置：d3.js

Answer 5

此处给出了轮廓和发光的另一个示例：http://www.w3.org/People/Dean/svg/texteffects/index.html

<svg width="350" height="75" viewBox="0 0 350 75"><title>MultiStroke</title><rect x="0" y="0" width="350" height="75" style="fill: #09f"/><g style="overflow:hidden; text-anchor: middle; font-size:45; font-weight: bold; font-family: Impact"><text x="175" y="55" style="fill: white; stroke: #0f9; stroke-width: 14">
    Stroked Text
    </text><text x="175" y="55" style="fill: white; stroke: #99f; stroke-width: 8">
    Stroked Text
    </text><text x="175" y="55" style="fill: white; stroke: black; stroke-width: 2">
    Stroked Text
    </text></g>
</svg>

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

5 个答案: