如何在SVG中獲得對文本的輪廓效果？

我只想要一個簡單的SVG圖像，它具有一些角度上的任意文本，我可以這樣做。事情是，我也希望文本具有某種「輪廓」效果。與D不同的是，字母D的內外邊緣用特定厚度的線繪製，其餘的D完全不被繪製，以致看起來幾乎「空心」。如何在SVG中獲得對文本的輪廓效果？

燦SVG做到這一點？

來源

2009-01-14 cletus

是它可以;-)

我試圖實現與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>

有趣的部分是在「樣式」屬性。

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

來源

2009-01-14 07:17:47 Xn0vv3r

甜。我也設法從Inkscape中解脫出來（而不是編輯XML，這很酷）。 – cletus 2009-01-14 07:32:51

僅供參考，Inkscape包含的很多樣式都是冗餘的（因爲它們是默認的）。對於上面的樣式屬性，你可能會得到： `「fill：none; stroke：＃000000; stroke-width：1px;」` 如果你是可能的話，你可能會忽略`stroke：＃000000`實際上使用黑色。 – nHaskins 2015-07-22 19:21:29

SVG中的圖形對象可以具有填充（默認爲黑色）和描邊（缺省爲無）。如果你想在你的文字上有紅色輪廓，那麼設置fill =「none」和stroke =「red」。您可能還想調整stroke-width屬性的值。

來源

2009-02-18 13:40:34 codedread

爲輪廓又如和光暈這裏給出：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-25 05:56:57 Nav

在Firefox上，如果東西比較小（例如小），這看起來不太好。在帶有`scale（）`的`transform'的組中，輪廓顯得不均勻，這可能是一個精確問題。 – phk 2017-09-08 19:19:57

漆階：中風;在我正在研究的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-22 00:59:47

可以使用<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屬性，以適應過濾器畫布大小，另見Humongous height value for <filter> not preventing cutoff或Gaussian blur cutoff at edges。

我還創建了一個互動d3.js -Powered演示來比較，在這個線程使用不同的設置這裏介紹玩弄不同的解決方案：https://bl.ocks.org/Herst/d5db2d3d1ea51a8ab8740e22ebaa16aa

來源

2017-09-08 19:13:44 phk

如何在SVG中獲得對文本的輪廓效果？

回答

相關問題