it-swarm.com.ru

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

Установка значения ширины штриха: 1 для элемента <rect> в SVG обводит обводкой каждую сторону прямоугольника.

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

88
user782860

Если вам нужен штрих или без штриха, вы также можете использовать 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 .

161
Erik Dahlström

Вы не можете изменить визуальный стиль различных частей одной фигуры в 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/

Red square with stroke on three sides

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

28
Phrogz

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

2
wdebeaum