Настройка ширины обводки у конкретных сторон SVG-фигуры

Быстрый ответ

Чтобы установить свойство stroke-width для определённых граней SVG-элемента, создайте отдельные элементы <path>, которым необходима специальная обводка. Вот как выглядит пример с разделенными путями для детализированного управления обводкой:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Этот прямоугольник-невидимка служит для определения координат -->
  <rect width="100%" height="100%" fill="none" />
  <!-- Обводка верхней грани; это как "утренний кофе" для SVG -->
  <path d="M 10,10 H 90" stroke="black" stroke-width="1"/>
  <!-- Обводка правой грани; как правило джентльмена! -->
  <path d="M 90,10 V 90" stroke="black" stroke-width="1"/>
</svg>

Работа со свойством stroke-dasharray

Чтобы установить stroke-width:1 только на одной грани, используйте stroke-dasharray. С помощью этого свойства можно создать обман зрения, выделяя нужные грани разной толщиной:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="80" height="80"
    stroke-dasharray="80, 160" stroke-dashoffset="80"
    stroke="black" fill="none"/>
</svg>

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

Использование масок и clip-path для точного контроля

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

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clip-top">
      <rect x="10" y="10" width="80" height="10" />
    </clipPath>
  </defs>
  <rect x="10" y="10" width="80" height="80"
    stroke="black" stroke-width="1" clip-path="url(#clip-top)" />
</svg>

В данной ситуации clip-path применён, чтобы обводка отображалась только на верхней грани.

Визуализация

Давайте вообразим SVG-фигуры как комнаты: нам необходимо покрасить лишь некоторые стены:

🏠 SVG-дом:
🚪🟥🚪🟥       🔲 Комната со всеми окрашенными стенами
🟥🚪🚪🚪        🔳 Комната с одной окрашенной стеной

При работе с SVG мы также выделяем только определенные стены:

🖌️ Бригада декораторов:
🚪🖼️🚪🖼️       stroke-width:1 на стенах с картинами
🖼️🚪🚪🚪       Посмотри, мама, одна из стен выделена!

Преодоление ограничений с помощью дополнительных фигур

Для создания сложных узоров обводки вы можете использовать несколько SVG-элементов:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Обводка верхней грани; верх должен всегда быть наверху! -->
  <rect x="10" y="10" width="80" height="1" fill="black" />
  <!-- Обводка правой грани; правильное выделение делает нашу работу идеальной! -->
  <rect x="89" y="10" width="1" height="80" fill="black" />
</svg>

Использование элемента polyline

Элемент <polyline> подойдет для акцентирования определённых граней, позволяя избежать полной обводки:

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <!-- Не нужно внутреннее заполнение -->
  <polyline points="10,10 90,10 90,11 11,11" fill="black" />
</svg>

Использование классов для повторного применения

Создание классов с определёнными значениями stroke-dasharray даст вам возможность многократного использования и упрощение поддержки кода:

<style>
  /* Время для обводок, ура! */
  .stroke-top { stroke-dasharray: 80, 160; stroke-dashoffset: 80; }
</style>

Полезные материалы

1. stroke – SVG: Scalable Vector Graphics | MDN – детальная информация о свойствах SVG обводки.
2. Блог SVGator – о том, как использовать SVG обводки и CSS в паре.
3. javascript – Focus Next Element In Tab Index – Stack Overflow – несмотря на то, что название запроса не совпадает, эта ссылка может пригодиться при изучении SVG.
4. Использование SVG масок для обведения определенных граней – обучение применению масок SVG и манипуляции обводкой.
5. Определение частичных границ в SVG – Пример на CodePen – иллюстративные примеры создания частичных границ с помощью SVG.