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

Установка ширины обводки: 1 для <rect>элемента в 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 height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

См. Jsfiddle .

Вы не можете изменить визуальный стиль различных частей одной формы в 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 позволяет применять разные штрихи к разным частям контура / формы, поэтому вам нужно использовать несколько объектов, чтобы получить тот же эффект.