Как сделать текст с обводкой в css
Перейти к содержимому

Как сделать текст с обводкой в css

  • автор:

Заливка и обводка

Есть несколько способов раскрасить фигуры SVG (в т.ч. с указанием атрибутов объекта), используя инлайн-CSS, встроенную CSS-секцию, или внешний файл CSS. Большая часть SVG, которую вы встретите в интернете, использует встроенный CSS, однако преимущества и недостатки есть у каждого типа.

Атрибуты заливки и обводки (Fill and Stroke Attributes)

Раскраска (Painting)

Основная раскраска может быть сделана установкой двух свойств на ноде — fill и stroke. Fill — устанавливает цвет внутри объекта, а stroke задаёт цвет линии, которая рисуется вокруг объекта. Вы можете использовать CSS-наименования цветов, что и в HTML — названия цветов (например, red), rgb-значения, hex-значения, rgba-значения и т.д.

rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5" stroke-opacity="0.8"/> 

Кроме того, вы можете задать прозрачность заливке и обводке по отдельности в SVG. Их прозрачность управляется атрибутами fill-opacity, stroke-opacity.

Примечание: Замечание: в Firefox 3+ допустимы rgba-значения и это даёт такой же эффект прозрачности, но для совместимости с другими просмотрщиками часто лучше определить прозрачность обводки/заливки отдельно. Если вы укажете и rgba-значение и значение fill-opacity/stroke-opacity — будут применены оба.

Обводка (Stroke)

Кроме цветовых свойств обводки, есть несколько атрибутов, управляющих способом обводки.

svg width="160" height="140" xmlns="http://www.w3.org/2000/svg" version="1.1"> line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt"/> line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square"/> line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/> svg> 

Свойство stroke-width определяет ширину обводки. Штрихи обводки рисуются вокруг пути. В примере выше путь изображён розовым, а обводка — черным.

Второй атрибут, влияющий на обводку — свойство stroke-linecap. Демонстрируется выше. Свойство управляет отображением концов линий.

Есть три возможных значения для stroke-linecap:

  • butt обрывает линию под прямым углом к направлению обводки и делает это сразу по окончании линии.
  • square в основном действует также, но немного растягивает обводку по краям пути. Длина, на которую продлевается обводка — это половина заданного значения stroke-width.
  • round задаёт закруглённые углы по краям обводки. Радиус этих кривых также управляется параметром stroke-width.

Используйте stroke-linejoin , чтобы определить, как соединять обводку двух сегментов линии.

svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1"> polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20" stroke-linecap="butt" fill="none" stroke-linejoin="miter"/> polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20" stroke-linecap="round" fill="none" stroke-linejoin="round"/> polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20" stroke-linecap="square" fill="none" stroke-linejoin="bevel"/> svg> 

Каждая из этих полилиний имеет два сегмента. Соединение, где они встречаются, управляется атрибутом stroke-linejoin . Есть три возможных значения для этого атрибута:

  • miter продолжает линию обводки дальше её обычной ширины, чтобы создать единственный квадратный угол.
  • round создаёт закруглённый сегмент линии
  • bevel создаёт новый угол для помощи в переходе между двумя сегментами

Наконец, вы можете использовать пунктирные линии в обводке, определив атрибут stroke-dasharray .

svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5" fill="none"/> path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5" fill="none"/> svg> 

В качестве аргумента атрибут stroke-dasharray принимает последовательность чисел, разделённых запятой.

Примечание: Замечание: в отличие от путей, эти числа ДОЛЖНЫ быть разделены запятыми (пробелы игнорируются).

Первое число определяет длину штриха, второе — длину между штрихами. В примере выше, второй путь чередует заливку штрихом в 5 пикселей, затем 5 пустых пикселей перед следующим штрихом в 5 пикселей. Вы можете задать больше чисел, если хотите более сложную систему штрихов. В первом примере задано 3 числа и в этом случае рендер берёт эти числа дважды, чтобы создать чётный паттерн. Т.о. первый путь отображается 5 закрашенными, 10 пустыми, 5 закрашенными и затем ещё раз 5 пустыми, 10 закрашенными, 5 пустыми «пикселями». Затем паттерн повторяется.

Также есть дополнительные stroke и fill свойства: fill-rule , которое определяет как будут заливаться сложные фигуры, которые имеют пересечения внутри себя; stroke-miterlimit , which determines if a stroke should draw miters и stroke-dashoffset , который указывает где начинается dash-array в линии (позволяет задать смещение пунктирной обводки относительно первоначального положения)

Использование CSS (Using CSS)

В дополнение к установке атрибутов объектов, вы также можете использовать CSS для стилизации заливки и обводки. Не все атрибуты могут быть установлены через CSS. Но атрибуты взаимодействия с раскраской и заливкой обычно доступны, так что fill , stroke , stroke-dasharray и т.д. могут быть заданы этим способом, также как и градиенты, и паттерны, что показано ниже. Атрибуты вроде width , height или команд для путей SVG не могут быть установлены через CSS. Проще всего просто протестировать и узнать, что доступно, а что нет.

Примечание: Спецификация SVG строго разделяет атрибуты на свойства и другие атрибуты. Первые могут быть изменены через CSS, а вторые — нет.

CSS может использоваться инлайн через атрибут style :

rect x="10" height="180" y="10" width="180" style="stroke: black; fill: red;"/> 

или может быть помещён в специальную стилевую секцию, которую вы включите. Вместо отображения такой секции в разделе , как это делается в HTML, она включается в зону , предназначенную для определений. Здесь можно создавать элементы, которые не появятся сами в SVG, но будут использованы другими элементами.

svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1"> defs> style type="text/css"> ]]>style> defs> rect x="10" height="180" y="10" width="180" id="MyRect"/> svg> 

Перемещение стилей в отдельную зону может сделать проще применение свойств к большим группам элементов. Вы также можете использовать вещи типа псевдоклассов наведения для создания эффектов переворачивания:

#MyRect:hover  stroke: black; fill: blue; > 

Также можно определить отдельный файл стилей для ваших CSS-правил через обычный XML-stylesheet синтаксис:

 svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1"> rect height="10" width="10" id="MyRect"/> svg> 

где style.css выглядит примерно так

#MyRect  fill: red; stroke: black; > 
  • « Предыдущая статья
  • Следующая статья »

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 5 дек. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Свойство text-stroke

Свойство text-stroke задает цвет и толщину контура символов текста или его обводку. Свойство принимает значение text-stroke-width (толщина границ) и text-stroke-color (цвет границ).

Синтаксис

Пример

Давайте зададим белую обводку для символов в нашем тексте толщиной 1px :

Смотрите также

  • свойство text-fill-color ,
    которое задает цвет заливки символам текста
  • свойство text-stroke-color ,
    которое задает цвет обводке текста
  • свойство text-stroke-width ,
    которое задает толщину обводки текста

Трепачёв Дмитрий © 2012-2024
t.me/trepachev_dmitry

Добавьте обводку вокруг текста — снаружи — с помощью CSS?

enter image description here

Который рендерится так: Я хочу добавить обводку вокруг него, что означает черную границу вокруг этого текста.
Я погуглил и нашел -webkit-text-stroke , и придумал:

body < background-color: gray; >h1

WHAT CARRER SHOULD YOU HAVE ?

enter image description here

Однако, эффект не тот, что я хочу: Как вы можете видеть, кажется, что обводка добавлена внутри текста, что делает текст слишком тонким для меня. Как мне сделать обводку вне текста? Фиддл: http://jsfiddle.net/jpjbk1z7/ PS: нужна только поддержка вебкита html css

Поделиться Источник 29 октября 2014 в 15:21

14 ответов

Для плавного внешнего обводка, эмулируемого тенью текста, используйте следующую тень из 8 осей:

 text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000; 

Для настройки вы можете использовать этот миксин SASS вместо этого (хотя изменение размера имеет побочные эффекты на отображение):

@mixin stroke($color: #000, $size: 1px) < text-shadow: -#-# 0 $color, 0 -# 0 $color, # -# 0 $color, # 0 0 $color, # # 0 $color, 0 # 0 $color, -# # 0 $color, -# 0 0 $color; > 

Это дает очень плавный обводку, без отсутствующих частей, как на решении с 4 осями.
Поделиться 27 ноября 2017 в 12:36

Теперь Firefox и Safari поддерживают новое свойство CSS с именем paint-order , которое может быть использовано для имитации внешнего хода :

h1 < color: #00ff01; font-size: 3em; -webkit-text-stroke: 5px black; >.fix-stroke

the default often is ugly

paint-order: stroke fill

Скриншот:

CSS paint-order screenshot

Поделиться 29 мая 2018 в 15:07
Один из вариантов — использовать text-shadow для имитации хода. Пример:

text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 

Поделиться 29 октября 2014 в 15:37

-webkit-text-stroke не поддерживает размещение обводки снаружи текста

как объясняет эта статья CSS-Tricks:

Образец, нарисованный текстом-обводкой, выравнивается по центру текстовой фигуры (как это установлено по умолчанию в Adobe Illustrator), и в настоящее время нет возможности установить выравнивание по внутренней или внешней стороне фигуры. К сожалению, это делает его гораздо менее удобным, так как теперь обводка мешает форме буквы, уничтожая исходный тип конструкторов. Настройка была бы идеальной, но если бы мы выбрали ее, внешняя обводка была бы намного более полезна.

Что насчет SVG?

Ну, кажется, что она также размещает обводку внутри — Фидддл

Однако

  1. Измените свой шрифт на sans-сериф, например, verdana, и
  2. Увеличите размер шрифта текста, к которому вы добавляете штрих.
body < background: grey; font-family: verdana; >.stroke, .no-stroke < color: white; font-size: 2.5em; >.stroke

WHAT CAREER SHOULD YOU HAVE?

WHAT CAREER SHOULD YOU HAVE?

Поделиться 29 октября 2014 в 15:26

Дальше разъясняя другие решения text-shadow , для пиксельно совершенных толстых круглых контур количество теней должно увеличиваться с радиусом обводки. Например, для контура толщиной 10px требуется 2*10*π 63 теней, распределенных во всех направлениях. Чтобы сгенерировать это в JavaScript, можно сделать что-то вроде:

 const color = "#FFF" /* white outline */ const r = 10 /* width of outline in pixels */ const n = Math.ceil(2*Math.PI*r) /* number of shadows */ var str = '' for(var i = 0;i document.querySelector("#myoutlinedtext").style.textShadow = str 

example of thick outlined text

Если толщина статична, просто запустите это один раз, чтобы сгенерировать строку и вставить ее в ваш CSS.

Поделиться 15 сентября 2021 в 15:58

Один из способов, который я нашел, заключался в том, чтобы разместить два элемента друг на друге, имея элемент, который остается за спиной, чтобы получить двойную ширину обводки. Элемент, который находится за спиной, утечка обводки снаружи видимого элемента, делая его настоящей обводкой снаружи.

Также, другой вариант — использовать :after для создания этого второго элемента. Недостаток заключается в том, что вы не можете программно изменить обводку

Это может не работать правильно при больших значениях обводки.

body < background-color: gray; >h1 < color: white; font-size: 2.5em; font-family: verdana; >.stroke < -webkit-text-stroke: 2px black; >.stack .stroke < -webkit-text-stroke: 4px black; >h1.stroke-fs < font-size: 2.7em; >.stack < position: relative; >.stack > h1:not(:first-child) < left: 0; margin: 0; position: absolute; top: 0; >.stroke-after:after
Stack 

WHAT CARRER SHOULD YOU HAVE ?

WHAT CARRER SHOULD YOU HAVE ?


After

WHAT CARRER SHOULD YOU HAVE ?


Native

WHAT CARRER SHOULD YOU HAVE ?


Font size

WHAT CARRER SHOULD YOU HAVE ?

Поделиться 06 марта 2018 в 14:13

Я знаю, что это старый вопрос, но посмотрите на это:

вы можете просто поместить другой текст поверх вырезанного текста с абсолютным позиционированием, это не так удобно, но это решает проблему

 .stroke < position:absolute; -webkit-text-stroke: 10px black; >.no-stroke

Поделиться 30 июля 2017 в 10:23

Я также попробовал text-shadow и -webkit-text-stroke, но безуспешно во всех отношениях. Я смог получить результат только, сделав два div (фон и передний), т.е.

фонный div с -webkit-text-stroke и передний div без -webkit-text-stroke.

 

Text with outine stroke outwards.

Text with outine stroke outwards.

Единственная проблема с сгенерированным html — это в два раза больше размера (размера в памяти), так как div повторяется дважды.

Есть ли у кого-то более хорошее решение?

Поделиться 04 ноября 2014 в 09:54

Вот миксин SCSS для имитации текстовых контур с несколькими тенями:

@use "sass:math"; @use 'sass:list'; @mixin text-outline($offset, $color, $num-steps: 16) < $shadows: (); @for $i from 0 to $num-steps < $angle: $i * 360deg / $num-steps; $x: calc(#* #); $y: calc(# * #); $shadows: list.append($shadows, # # 0 #, $separator: comma); > text-shadow: $shadows; > 

Для больших смещений требуется большее количество теней («шагов») для хороших результатов. Обратите внимание, что в целом, однако, больше теней будет дороже для браузера.

span

white outline around text

Результат:

Поделиться 05 июля 2022 в 22:56

Тень текста может быть использована для достижения этого результата http://css3generator.com

Поделиться 29 октября 2014 в 15:31

Добавьте пользовательский атрибут, который совпадает с текстовым содержимым узла, и определите псевдокласс ::before , который выступает в качестве не встроенного текста, который будет отображаться перед встроенным текстом, создавая желаемую иллюзию встроенного текста только снаружи:

label < user-select: none; >label:has(:checked) ~ .stroke::before < content: attr(data-text); position: absolute; pointer-events: none; /* for text selection */ -webkit-text-stroke: 0px; >.stroke < margin: .5em; font: 60px arial; /* trick */ position: relative; -webkit-text-stroke: 20px purple; color: cyan; >
  

Nice little trick

В будущем, когда Chrome решит эту проблему, вы можете просто удалить селектор ::before .

Я открыл запрос в сообществе CSS для улучшения свойства content : https://github.com/w3c/csswg-drafts/issues/8894

Поделиться 08 июня 2023 в 14:32

Html

Your text

Css

.text-stoke < position: relative; color: white; &:after < content: attr(data-text); position: absolute; left: 0; top: 0; -webkit-text-stroke: 2px var #000; -webkit-text-fill-color: transparent; z-index: -1; >> 

Поделиться 14 августа 2023 в 10:38

Вот SASS миксин, который я создал, чтобы легко создать наброски текста с помощью префиксированных свойств ( -webkit , -moz ) при поддержке, но возвращаясь к простому цвету с тенью текста. Обратите внимание, что обратная сторона не работает хорошо с непрозрачными цветами заливки, но кроме этого, я думаю, это довольно хорошее решение, пока мы не получим стандартный метод, который имеет лучшую поддержку браузера.

Миксин

@mixin text-stroke($fill-color, $stroke-color, $stroke-width) < color: $fill-color; text-shadow: -$stroke-width -$stroke-width 0 $stroke-color, $stroke-width -$stroke-width 0 $stroke-color, -$stroke-width $stroke-width 0 $stroke-color, $stroke-width $stroke-width 0 $stroke-color; @supports ((-webkit-text-stroke-color: $stroke-color) and (-webkit-text-fill-color: white)) or ((-moz-text-stroke-color: $stroke-color) and (-moz-text-fill-color: white)) < color: unset; text-shadow: unset; -moz-text-fill-color: $fill-color; -webkit-text-fill-color: $fill-color; -moz-text-stroke-color: $stroke-color; -webkit-text-stroke-color: $stroke-color; -moz-text-stroke-width: $stroke-width; -webkit-text-stroke-width: $stroke-width; >> 

Пример использования

(Делает текст полупрозрачным черным с белым наброском)

.heading-outline

Поделиться 29 ноября 2018 в 20:04

Очевидно, я опаздываю на вечеринку, но я нахожу, что самый простой, вероятно, лучший способ продвинуться к решению.

Для меня, я сделал внешний эффект обводки, просто увеличив вес шрифта.

body < background-color: gray; >h1

Это наиболее правильный вариант?
В зависимости от ситуации, ответ — да или нет.

Работает ли это в вашем случае?
. для меня, да, безупречно.

Работаем с текстом

Текст задаётся с помощью тега text. Основные атрибуты — x и y. Нужно не забывать указывать базовую линию для текста, за которую отвечает атрибут y. Если её не указать, то по умолчанию она окажется в точке с координатой 0, и текст станет невидимым, так как он рисуется над базовой линией. Значение атрибута должно быть больше размера шрифта. Размер viewBox также должно быть по крайней мере равен размеру атрибута. Атрибут font-sizeзадаёт размер шрифта в пикселях относительно viewBox. Текст при этом адаптируется к размерам страницы. Также доступны и другие атрибуты.

Текст из SVG можно выделять и копировать. Текст, помещаемый в SVG-документ, индексируется поисковыми системами.

   Этот кот в SVG  

Нужно следить за размерами viewBox, чтобы длинный текст уместился в контейнере.

Как и в HTML, лишние пробелы игнорируются.

Чтобы сдвинуть текст по горизонтали, можно использовать атрибут x в text. Если атрибут не указан, то используется значение по умолчанию 0.

Атрибуты

  • direction — Направление текста. В некоторых языках (например, в арабском) принято писать текст справа налево. Для задания написания справа налево необходимо дополнительно включать атрибут unicode-bidi. Возможные значения: rtl | ltr (по умолчанию)
  • dominant-baseline — Выравнивание текста относительно горизонтальной линии. Возможные значения: auto (по умолчанию) | hanging | mathematical
  • fill — Цвет текста. Поддерживаются именованные значения, а также RGB-код в десятичной и шестнадцатеричной формах. Значение по умолчанию — black
  • font-family — Шрифт текста. Все шрифты, доступные на компьютере. При отсутствии заданного шрифта будет использован подобный (например, при отсутствии шрифта Arial будет использован Arial Bold). Значение по умолчанию — Arial
  • font-size — Размер шрифта. Значение по умолчанию 12 пт.
  • font-size-adjust — Значение по умолчанию — none
  • font-stretch — Сжатие и растяжение текста. Возможные значения: normal (по умолчанию) | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
  • font-style — Начертание текста. Возможные значения: normal (по умолчанию) | italic | oblique
  • font-weight — Вес шрифта. От 100 до 900 — Эти значения формируют упорядоченную последовательность, где каждый номер обозначает вес, который темнее своего предшественника. normal — то же, что «400». bold — то же, что «700». bolder — Определяет вес шрифта, более темный, чем наследуемый. Если такого веса нет, результатом будет более «темное» числовое значение (а шрифт не изменяется), если только наследуемое значение не «900», в этом случае результат будет также «900». lighter — Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более «светлое» числовое значение (а шрифт не изменяется), если только наследуемое значение не «100», в этом случае результат будет также «100». Возможные значения: normal (по умолчанию) | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
  • glyph-orientation-horizontal — Горизонтальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (и значения со знаком минус). По умолчанию — auto или 0
  • glyph-orientation-vertical — Вертикальная ориентация символов. Возможен выбор из фиксированного диапазона значений угла. Возможные значения: 0 | 90 | 180 | 270 (И значения со знаком минус). По умолчанию — auto или 0
  • kerning — Интервал между буквами. Возможные значения: auto (по умолчанию) | число
  • letter-spacing — Интервал между буквами. Возможные значения: normal | число
  • text-anchor — Выравнивание текста относительно начала строки. Возможные значения: start (по умолчанию), middle, end
  • text-decoration — Подчеркивание, надчеркивание, перечеркивание текста. Возможные значения: none (по умолчанию) | underline | overline | line-through
  • unicode-bidi — Для работы атрибута direction со значением ltr необходимо наличие в коде свойства unicode-bidi со значением embed или override. Возможные значения: normal (по умолчанию) | embed | bidi-override
  • word-spacing — Интервал между словами. Возможные значения: normal (по умолчанию) | число
  • writing-mode — Устанавливает расположение текстового фрагмента как единого целого относительно исходной точки. Возможные значения, например, слева направо — сверху вниз ( left to right top to bottom ) не изменяют порядок самих букв в словах. Возможные значения: lr-tb (по умолчанию) | rl-tb | tb-rl | lr | rl | tb
  • x — Абсцисса верхней левой точки текстового блока. Значение по умолчанию: 0
  • y — Ордината верхней левой точки текстового блока. Значение по умолчанию: 0

Стилизация

Текст может быть стилизован с помощью свойств CSS, таких как font-weight, font-style, text-decoration, text-transform и т.д.

  Подчеркнутый кот средствами SVG  

Подчеркнутый кот средствами SVG

Частичная стилизация через

Если нужно применить стили или атрибуты только для определенной части, то можно использовать элемент к разным частям текста в строке.

    Жирный кот, наклонный кот и подчеркнутый кот.  

Жирный кот , наклонный кот и подчеркнутый кот .

Цвет

Цвет текста задаётся через свойство fill.

  fill="red">Цветной кот  

Режим вывода текста

Японская письменность использует режим сверху вниз. Этот режим можно включить через атрибут writing-mode со значением tb (top-to-bottom). Я не знаю японских иероглифов, поэтому вставлю русские символы.

  Неко - японский кот  

Неко — японский кот

Добавление текста в заголовок страницы

Можно сделать красивый заголовок на странице, используя CSS:

 header < width: 80%; margin: 0 auto; >svg text < font-family: sans-serif; text-transform: uppercase; font-weight: 900; font-size: 90px; fill: blue; > 
Hawaii

SVG будет автоматически подстраиваться под размеры контейнера.

SVG может использовать любой шрифт, встроенный в страницу или из CSS. Текст доступен для поисковых роботов.

SVG-текст можно сделать ссылкой.

Но в этом случае вы не сможете использовать встроенный шрифт. Текст будет доступен для поисковых систем, но его нельзя скопировать.

Обводка текста

Обводка для текста делается похожим образом, как в CSS, только вместо указания цвета для текста нужно использовать свойство fill. Если цвет не указан, то используется чёрный цвет.

  Обведи кота вокруг пальца  

Обведи кота вокруг пальца

Присвоим атрибуту fill значение none, чтобы оставить только обводку.

Обведи кота вокруг пальца

При желании можно вынести код в стили.

    text Обведи кота вокруг пальца  

Градиент

Текст можно сделать градиентным. Задаём цвета градиента при помощи linearGradient и присваиваем ему идентификатор. Связываем идентификатор с свойством fill.

        Градиентный кот  

Текст вдоль кривой линии

Текст можно выводить не только строго вдоль вертикальной линии, но и вдоль замысловатой кривой.

Для начала нужно создать траекторию path в элементе defs. Элементу path добавляем атрибут id, чтобы связать текст в элементе textPath через xlink:href:

       Кот вдоль кривой   

Кот вдоль кривой

Пример размещения текста вдоль окружности вынесен в отдельную статью.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *