Latest web development tutorials

Свойства Stroke SVG

Свойства Stroke SVG

SVG предлагает широкий спектр атрибутов хода. В этой главе мы рассмотрим следующее:

  • ход
  • штрих-ширина
  • инсульт-linecap
  • инсульт-dasharray

Все атрибуты обводки могут быть применены к любому типу линий, текста и элементов, как круговой контур.


SVG свойство хода

Атрибут Stroke определяет строку или текстовый элемент цвет контура:

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<G Заправлять = "нет">
<Путь ход = "красный" d = "M5 20 L215 0" />
<Путь ход = "синий" d = "M5 40 L215 0" />
<Путь ход = "черный" d = "M5 60 L215 0" />
</ G>
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).


SVG-тактный атрибут ширины

Tstroke- ширина атрибуты определяют линию, или толщину текстового элемента контура:

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<G заливка = "нет" ход = "черный">
<Путь штрих-ширина = "2" d = "M5 20 L215 0" />
<Путь штрих-ширина = "4" d = "M5 40 L215 0" />
<Путь штрих-ширина = "6" d = "M5 60 L215 0" />
</ G>
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).


SVG-тактный linecap недвижимость

strokelinecap атрибут определяет конец открытого пути различных типов:

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<G заливка = "нет" ход = "черный" ход-ширина = "6">
<Путь штрих-linecap = "встык" d = "M5 20 L215 0" />
<Путь штрих-linecap = "круглый" d = "M5 40 L215 0" />
<Путь штрих-linecap = "квадрат" d = "M5 60 L215 0" />
</ G>
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).


SVG-тактный dasharray недвижимость

strokedasharray имущество, используемое для создания пунктирной линии:

Вот SVG код:

примеров

<= XMLNS SVG "http://www.w3.org/2000/svg" версия = "1.1">
<G заливка = "нет" ход = "черный" ход-ширина = "4">
<Путь-тактный dasharray = "5,5" d = "M5 20 L215 0" />
<Путь штрих-dasharray = "10,10" d = "M5 40 L215 0" />
<Путь штрих-dasharray = "20,10,5,5,5,10" d = "M5 60 L215 0" />
</ G>
</ SVG>

Попробуйте »

Для пользователей Opera: вид SVG - файла (щелкните правой кнопкой мыши на источнике предварительного просмотра SVG графики).