Главная » Языки программирования

Svg толщина линии css

Содержание
  1. stroke
  2. Пример
  3. Как пишется
  4. Подсказки
  5. На практике
  6. Realetive советует
  7. stroke-width
  8. Example
  9. Usage notes
  10. Specifications
  11. Browser compatibility
  12. Found a content problem with this page?
  13. MDN
  14. Support
  15. Our communities
  16. Developers
  17. stroke
  18. Контекст использования
  19. Примеры
  20. SVG Line с stroke
  21. Пример 1: Нарисуйте прямую зелёную линию, используя stroke
  22. Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke
  23. Использование context-stroke
  24. Элементы
  25. Found a content problem with this page?
  26. SVG: заливка и обводка
  27. fill
  28. fill-rule
  29. fill-opacity
  30. stroke
  31. stroke-width
  32. stroke-linecap
  33. stroke-linejoin
  34. stroke-dasharray
  35. stroke-dashoffset
  36. stroke-opacity
  37. Сайдбар
  38. Статьи
  39. Страницы
  40. Проекты

stroke

Как и у одноимённого SVG-атрибута, задаёт цвет обводки SVG-элемента. При наличии указанного через CSS или атрибут на этом же SVG-теге свойства stroke — width — толщины обводки, которая должна быть больше 0 .

Пример

Скопировать ссылку «Пример» Скопировано

 .circle  stroke: #123456;> .circle  stroke: #123456; >

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Свойство соответствует SVG-атрибуту stroke и содержит обозначение цвета.

Помимо стандартных форматов: именованного цвета ( orange , rebeccapurple и др.), RGB(A), HEX и HSL(A), stroke поддерживает формат ссылки на SVG-элемент, который будет как паттерн заполнять площадь обводки:

 .circle  stroke: url(#pattern);> .circle  stroke: url(#pattern); >

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Через CSS-свойство можно управлять цветом обводки SVG-элементов с помощью других возможностей CSS, например, при наведении курсора:

 .circle  stroke: url(#pattern);> .circle:hover  stroke: blue;> .circle  stroke: url(#pattern); > .circle:hover  stroke: blue; >

На практике

Скопировать ссылку «На практике» Скопировано

Realetive советует

Скопировать ссылку «Realetive советует» Скопировано

🛠 CSS-свойство stroke влияет на цвет обводки только при вставке всего SVG-кода непосредственно в HTML — SVG-изображение,
вставленное через SVG-шрифт, , или background , background — image не увидит его.

Источник

stroke-width

The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape.

You can use this attribute with the following SVG elements:

Example

html, body, svg  height: 100%; > 
svg viewBox="0 0 30 10" xmlns="http://www.w3.org/2000/svg"> circle cx="5" cy="5" r="3" stroke="green" /> circle cx="15" cy="5" r="3" stroke="green" stroke-width="3" /> circle cx="25" cy="5" r="3" stroke="green" stroke-width="2%" /> svg>

Usage notes

Note: A percentage value is always computed as a percentage of the normalized viewBox diagonal length.

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on May 21, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

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

Источник

stroke

Атрибут обводки определяет цвет контура в данном графическом элементе. Значение по умолчанию для атрибута обводки — None.

Контекст использования

Примеры

SVG Line с stroke

Пример 1: Нарисуйте прямую зелёную линию, используя stroke

svg height="50" width="300"> path stroke="green" d="M5 20 1215 0" /> svg>

Пример 2: Нарисуйте чёрный круг с синей рамкой используя stroke

svg height="100" width="100"> circle cx="50" cy="50" r="40" stroke="blue" stroke-width="2" fill="black" /> svg>

Использование context-stroke

Информацию об использовании значения нестандартного и ограниченного context-stroke (и context-fill ) смотреть в документации для свойства -moz-context-properties .

Элементы

Следующие элементы могут использовать атрибут stroke .

Found a content problem with this page?

This page was last modified on 22 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Источник

SVG: заливка и обводка

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

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

В качестве заливки и обводки можно задавать none , цвета, ключевые слова ( currentColor и transparent ), а также градиенты и паттерны.

fill

Возможные значения: none , ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black .

svg width="200" height="200"> defs> symbol id="s-rect"> rect width="70" height="70"/> symbol> linearGradient id="g-green" x1="0%" y1="0%" x2="0%" y2="90%" > stop offset="0%" stop-color="yellowgreen" /> stop offset="90%" stop-color="green" /> linearGradient> defs> use xlink:href="#s-rect" x="20" y="20" fill="hsla(348, 83%, 47%,.3)"/> use xlink:href="#s-rect" x="110" y="20" fill="rgb(255, 215, 0)"/> use xlink:href="#s-rect" x="20" y="110" fill="url(#g-green)"/> use xlink:href="#s-rect" x="110" y="110" fill="skyblue"/> svg>

fill-rule

Свойство определяет как будут заливаться сложные фигуры, имеющие пересечения внутри себя. Для простых фигур ни на что не влияет. Возможные значения: nonzero , evenodd

fill-rule=»nonzero» интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).

 use xlink:href="#s-rect" x="20" y="20" fill="url(#g-red)" fill-opacity=".5"/> use xlink:href="#s-rect" x="50" y="50" fill="hsl(50, 100%, 50%)" fill-opacity=".5"/> use xlink:href="#s-rect" x="80" y="80" fill="url(#g-green)" fill-opacity=".5"/>

stroke

svg width="200" height="200"> rect width="160" height="160" x="20" y="20" fill="none" stroke="yellowgreen"/> svg>

stroke-width

svg width="200" height="200"> rect width="100" height="100" x="50" y="50" fill="none" stroke="gold" stroke-width="10"/> rect width="160" height="160" x="20" y="20" fill="none" stroke="yellowgreen" stroke-width="10%"/> svg>

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt , round , square . Значение по умолчанию: butt .

 use xlink:href="#s-path" stroke="orangered" y="20" stroke-linecap="butt"/> use xlink:href="#s-path" stroke="olivedrab" y="85" stroke-linecap="round"/> use xlink:href="#s-path" stroke="steelblue" y="150" stroke-linecap="square"/>

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter , round , bevel . Значение по умолчанию: miter .

 use xlink:href="#s-corner" stroke="orangered" y="0" stroke-linejoin="miter"/> use xlink:href="#s-corner" stroke="olivedrab" y="80" stroke-linejoin="round"/> use xlink:href="#s-corner" stroke="steelblue" y="160" stroke-linejoin="bevel"/>

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray=»1″ нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины. Примеры разных пунктирных линий:

svg width="300" height="160"> path d="M 20 20 h 260" stroke="purple" stroke-width="1" stroke-dasharray="1" /> path d="M 20 40 h 260" stroke="mediumspringgreen" stroke-width="15" stroke-dasharray="1 3" /> path d="M 20 60 h 260" stroke="orangered" stroke-width="1" stroke-dasharray="5%" /> path d="M 20 80 h 260" stroke="green" stroke-width="1" stroke-dasharray="1 5" /> path d="M 20 100 h 260" stroke="steelblue" stroke-width="1" stroke-dasharray="2 7 6" /> path d="M 20 120 h 260" stroke="orange" stroke-width="5" stroke-dasharray="5" /> path d="M 20 140 h 260" stroke="mediumseagreen" stroke-width="1" stroke-dasharray="12% 5%" /> svg>

Используя обводку и простые фигуры можно получить удивительные вещи:
Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

Свойство позволяет задать смещение пунктирной обводки относительно первоначального положения. Значение задается в единицах длины или в процентах, значения могут быть отрицательными. Значение по умолчанию: 0. В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset :

svg width="270" height="270"> g class="g-circles" fill="none" stroke-width="15" stroke-dasharray="25% 110%" transform="rotate(72 135 135)"> circle r="115" cx="135" cy="135" stroke="crimson"/> circle r="115" cx="135" cy="135" stroke="orangered" stroke-dashoffset="25%"/> circle r="115" cx="135" cy="135" stroke="gold" stroke-dashoffset="50%"/> g> svg>

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

svg width="200" height="200"> g class="g-circles" fill="none" stroke-width="15"> circle r="40" cx="60" cy="60" stroke="crimson" stroke-opacity=".7"/> circle r="55" cx="100" cy="100" stroke="orangered" stroke-opacity=".5" /> circle r="40" cx="140" cy="140" stroke="gold" stroke-opacity=".25"/> g> svg>

Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.

Сайдбар

Статьи

  • Математические функции в CSS
  • Адаптивное видео с помощью встроенных математических функций CSS
  • Недоступность в картинках
  • Единицы размеров в CSS
  • Генератор цветовых тем
  • Jekyll → Gatsby
  • Вариативные шрифты
  • Размеры в SVG
  • Адаптивный Pixel Perfect
  • Логотип не отвечает или временно недоступен
  • SVG-паттерны
  • Мыльные пузыри на SVG
  • SVG-градиенты
  • Весёлая консолька
  • SVG-маски
  • Умная прокрутка со Scroll Snap Points
  • CSS-анимации для ротации изображений
  • Анимированные SVG-маски
  • Странности обводки в SVG
  • SVG-прелоадеры
  • Анимируем градиенты ещё раз
  • Background-blend-mode
  • Возможности оформления SVG
  • CSS и SVG маски
  • Nth-child и nth-of-type
  • SVG-иконки
  • SVG: заливка и обводка
  • SVG-path
  • SVG: группировка и переиспользование элементов
  • SVG-фигуры и трансформации
  • SVG
  • СSS-градиенты и 3D
  • Рисовалка анимированных теней
  • Свежие CSS-паттерны
  • CSS-паттерны
  • Радиальные градиенты
  • Линейные градиенты
  • Крестики-нолики на CSS
  • Border-image
  • Электронные часы на CSS и JS.
  • Сколько весят селекторы?
  • Символы юникода
  • Свойство content
  • Анимируем CSS-градиенты
  • Текстовые эффекты
  • Древовидный список на CSS
  • Css-селекторы, часть 2
  • Css-селекторы
  • Контекст наложения
  • Два способа «прошить» элемент по краю
  • Box-sizing
  • Цвета в CSS
  • Фон под строчками: добавляем поля
  • Box-shadow
  • Css-фигуры: лепесток
  • Transform
  • Css Animation
  • 3D-куб
  • Border-radius
  • First letter
  • Эти глаза напротив
  • CSS-фигуры
  • Стрелки с помощью свойства border
  • Flexbox

Страницы

Проекты

Источник

Читайте также:  Тег BUTTON
Оцените статью
© 2024 Программирование