Установка ширины обводки: 1 для <rect>
элемента в SVG помещает обводку с каждой стороны прямоугольника.
Как разместить ширину обводки только с трех сторон прямоугольника SVG?
html
svg
vector-graphics
inkscape
user782860
источник
источник
stroke-dasharray
данный объект, определяющий, какие границы должны отображаться. Чтение кода может помочь вам понять, как он работает: codepen.io/lazd/pen/WNweNwy?editors=1010Вы не можете изменить визуальный стиль различных частей одной формы в SVG (отсутствие еще недоступного модуля векторных эффектов ). Вместо этого вам нужно будет создать отдельные формы для каждого штриха или другого визуального стиля, который вы хотите изменить.
Специально для этого случая вместо использования элемента
<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" />
Вы можете увидеть эффект от них в действии здесь: http://jsfiddle.net/b5FrF/3/
Для получения дополнительной информации прочтите о фигурах
<polyline>
и более мощных, но более запутанных<path>
.источник
Вы можете использовать полилинию для трех обведенных сторон и просто не наносить обводку на прямоугольник. Я не думаю, что SVG позволяет применять разные штрихи к разным частям контура / формы, поэтому вам нужно использовать несколько объектов, чтобы получить тот же эффект.
источник