Как установить ширину штриха: 1 только на определенных сторонах SVG-фигур?
Установка ширины штриха: 1 в элементе <rect> в SVG помещает штрих со всех сторон прямоугольника.
Как разместить ширину хода только на трех сторонах прямоугольника SVG?
Ответ 1
Если вам нужен инсульт или без штриха, вы также можете использовать stroke-dasharray, чтобы сделать тире и пробелы совпадающими со сторонами прямоугольника.
Вы не можете изменить визуальный стиль различных частей одной фигуры в SVG (отсутствие еще не доступного Vector Effects). Вместо этого вам нужно будет создать отдельные фигуры для каждого штриха или другого визуального стиля, который вы хотите изменить.
В частности, для этого случая вместо использования элемента <rect> или <polygon> вы можете создать <path> или <polyline>, который охватывает только три стороны прямоугольника:
<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />
Для получения дополнительной информации прочитайте <polyline> и более-мощный, но более запутанный <path> формы.
Ответ 3
Вы можете использовать полилинию для трех поглаженных сторон и просто не помещать штрих на прямоугольник. Я не думаю, что SVG позволяет применять различные штрихи к различным частям пути/формы, поэтому вам нужно использовать несколько объектов для получения того же эффекта.