55

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

SVG可以做到这一点吗？

4

5 回答 5

63

绘画顺序：笔画；在我正在处理的这个 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

于 2014-10-22T00:59:47.787 回答
37

是的，它可以 ;-）

我试图用Inkscape实现这一点，然后编辑了 svg 文件的源代码。只是不要填充它并使用具有颜色和宽度的笔触来绘制它。我明白了：

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

有趣的部分在“style”属性中。

"fill:none;fill-opacity:1;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
于 2009-01-14T07:17:47.173 回答
18

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

<svg style="height:100px;width:100%;background-color:Green">

<defs>
<filter id="whiteOutlineEffect" color-interpolation-filters="sRGB">
  <feMorphology in="SourceAlpha" result="MORPH" operator="dilate" radius="2" />
  <feColorMatrix in="MORPH" result="WHITENED" type="matrix" values="-1 0 0 0 1, 0 -1 0 0 1, 0 0 -1 0 1, 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///属性以适应过滤器画布大小，另请参阅< filter> 的巨大高度值不防止边缘处的截止或高斯模糊截止。ywidthheight

我还创建了一个交互式d3.js 驱动的演示，以比较此线程中提供的不同解决方案和各种设置：https ://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa

于 2017-09-08T19:13:44.137 回答
9

SVG 中的图形对象可以有填充（默认为黑色）和描边（默认为无）。如果你想在你的文本上有红色轮廓，那么设置 fill="none" 和 stroke="red"。您可能还想调整 stroke-width 属性的值。

于 2009-02-18T13:40:34.810 回答
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>
于 2014-04-25T05:56:57.373 回答