Какое свойство меняет border у svg?

Влияние свойств CSS на границу (border) SVG-элементов

Для изменения границы у SVG-элементов используются два основных свойства CSS: stroke и stroke-width. В отличие от обычных HTML-элементов, где применяется стандартное свойство border, в SVG концепция обводки реализована иначе, так как SVG — это векторный формат, основанный на путях (paths), а не на прямоугольных блоках.

Ключевые свойства для управления обводкой SVG

Основные свойства для управления "границей" SVG:

• stroke — определяет цвет обводки (аналогично border-color). Может принимать значения цвета в любом формате (HEX, RGB, RGBA, HSL, названия цветов).
• stroke-width — определяет толщину обводки в единицах измерения SVG (обычно пиксели). Аналогично border-width.
• stroke-linecap — задает стиль окончаний линий (для открытых путей): butt (по умолчанию), round, square.
• stroke-linejoin — задает стиль соединения сегментов линий: miter (по умолчанию), round, bevel.
• stroke-dasharray — создает пунктирную или штриховую обводку.
• stroke-dashoffset — смещает начало паттерна, заданного stroke-dasharray.
• stroke-opacity — определяет прозрачность обводки (от 0 до 1).

Примеры применения в CSS

/* Стили для SVG-элементов, например, <rect>, <circle>, <path> */
svg rect {
  stroke: #3498db;        /* Синий цвет обводки */
  stroke-width: 3px;      /* Толщина 3 пикселя */
  fill: #ecf0f1;          /* Заливка внутренней области */
}

svg .dashed-circle {
  stroke: #e74c3c;
  stroke-width: 2;
  stroke-dasharray: 5, 3; /* Пунктир: 5px длина штриха, 3px пробел */
  fill: none;
}

svg .rounded-path {
  stroke: #2ecc71;
  stroke-width: 4;
  stroke-linecap: round;  /* Закругленные концы линий */
  stroke-linejoin: round; /* Закругленные стыки сегментов */
}

Важные особенности и отличия от border

1. Применение к разным элементам: Эти свойства работают не с самим тегом <svg> как контейнером, а с графическими элементами внутри него: <rect>, <circle>, <ellipse>, <line>, <polyline>, <polygon>, <path>. Чтобы добавить обводку всему холсту SVG, нужно обернуть элементы в группу <g> и применить стили к ней или использовать inline-стили для самого <svg>.

2. Отсутствие сложных стилей: В SVG нет прямых аналогов border-style для двойных (double) или рельефных (groove, ridge) границ. Эффекты достигаются комбинацией элементов или фильтрами (<filter>).

3. Влияние системы координат: stroke-width рисуется поровну внутрь и наружу от контура пути. Это важно для точного позиционирования. Можно изменить это поведение с помощью свойства stroke-alignment (экспериментальное) или атрибута vector-effect: non-scaling-stroke;, чтобы толщина обводки не масштабировалась.

4. Inline-атрибуты vs CSS: Стили можно задавать и как атрибуты прямо в SVG-разметке, но использование CSS предпочтительнее для управления извне.

<!-- Пример SVG с inline-атрибутами и CSS-классом -->
<svg width="200" height="200">
  <!-- Прямоугольник с атрибутами -->
  <rect x="20" y="20" width="60" height="60" 
        stroke="black" stroke-width="2" fill="yellow"/>
  
  <!-- Круг с CSS-классом -->
  <circle cx="120" cy="60" r="30" class="styled-circle"/>
</svg>

<style>
  .styled-circle {
    stroke: purple;
    stroke-width: 4px;
    fill: #ffccff;
    stroke-dasharray: 10 5;
  }
</style>

Итог

Для изменения "границы" (border) SVG-элементов не используется стандартное CSS-свойство border. Вместо этого применяются специализированные свойства, начинающиеся с stroke-, где основными являются stroke для цвета и stroke-width для толщины. Это соответствует природе векторной графики, где обводка является неотъемлемой частью контура фигуры, а не внешней рамкой прямоугольного блока. Понимание этой разницы критически важно для корректной стилизации векторной графики в веб-разработке.