Как установить ширину штриха: 1 только на определенных сторонах SVG-фигур?

Установка ширины штриха: 1 в элементе в SVG помещает штрих со всех сторон прямоугольника.

Как разместить ширину хода только на трех сторонах прямоугольника SVG?

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

     rect { fill: none; stroke: black; } .top { stroke-dasharray: 0,50,150 } .left { stroke-dasharray: 150,50 } .bottom { stroke-dasharray: 100,50 } .right { stroke-dasharray: 50,50,100 } 
           

    Вы не можете изменить визуальный стиль различных частей одной фигуры в SVG (отсутствие еще не доступного модуля Vector Effects ). Вместо этого вам нужно будет создать отдельные фигуры для каждого штриха или другого визуального стиля, который вы хотите изменить.

    В частности, для этого случая вместо использования элемента или вы можете создать или которая охватывает только три стороны прямоугольника:

        

    Вы можете увидеть их действие в действии: http://jsfiddle.net/b5FrF/3/

    Красная площадь с инсультами с трех сторон

    Для получения дополнительной информации читайте о и более мощных, но более запутанных формах .

    Вы можете использовать полилинию для трех поглаженных сторон и просто не помещать штрих на прямоугольник. Я не думаю, что SVG позволяет применять различные штрихи к различным частям пути / формы, поэтому вам нужно использовать несколько объектов для получения того же эффекта.

    Давайте будем гением компьютера.