Как получить контурный эффект для текста в SVG?

Мне просто нужен простой образ SVG, который имеет некоторый произвольный текст под углом, который я могу сделать. Дело в том, что я также хочу, чтобы текст имел своего рода "контурный" эффект. Подобно, а не твердому D, внутренний и внешний края буквы D нарисованы линией определенной толщины, а остальная часть D вообще не нарисована, чтобы выглядеть почти "полым".

Может ли SVG сделать это?

Ответ 1

Да, это может ;-)

Я попытался понять это с помощью 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>

Ответ 2

порядок окраски: ход; работал чудесами для меня в этой диаграмме 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

Ответ 3

Для этого вы можете использовать <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>

Ответ 4

Графические объекты в SVG могут иметь заливку (по умолчанию по умолчанию) и штрих (по умолчанию нет). Если вы хотите иметь красную контур вашего текста, тогда установите fill = "none" и stroke = "red". Возможно, вы захотите также изменить значение свойства ширины штриха.

Ответ 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>