web-dev-qa-db-ja.com

SVGでテキストのアウトライン効果を取得する方法は？

角度に任意のテキストがある単純なSVG画像が欲しいだけです。つまり、テキストに一種の「アウトライン」効果を持たせたいのです。ソリッドDではなく、文字Dの内側と外側のエッジは、指定された太さの線で描画され、残りのDはほとんど「空」に見えるように描画されません。

SVGはこれを実行できますか？

svg
41
cletus

はい、できます;-)

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;"
29
Xn0vv3r

ペイント順序：ストローク。私が取り組んでいるこの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

40
Ian Venskus

これには<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属性を調整する必要がある場合があります。 <filter>の巨大な高さの値はカットオフを妨げない または エッジでのガウスぼかしカットオフ 。

また、インタラクティブな d3.js -poweredデモを作成して、このスレッドで提示されたさまざまなソリューションとさまざまな設定を比較してみました： https://bl.ocks.org/Herst/ d5db2d3d1ea51a8ab8740e22ebaa16aa

9
phk

SVGのグラフィカルオブジェクトには、塗りつぶし（デフォルトでは黒）とストローク（デフォルトではなし）を設定できます。テキストに赤いアウトラインを付けたい場合は、fill = "none"とstroke = "red"を設定します。 stroke-widthプロパティの値を微調整することもできます。

8
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>
3
Nav