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

97

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

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

user782860
источник

Ответы:

171

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

Эрик Дальстрём
источник
Как мы можем показать обводку только поверх прямоугольного элемента?
Суреш
1
Не могли бы вы объяснить, почему определенные числа в определенных позициях дают такой эффект?
JacobIRR
@JacobIRR относится к определению свойства «stroke-dasharray» (ссылка на него приведена в ответе). Идея здесь состоит в том, чтобы согласовать длину штрихов со сторонами прямоугольника, а промежуток между штрихами - со стороной, на которой не должно быть обводки.
Эрик Дальстрем
Я только что обновил ваше решение по этой ссылке codepen.io/shaswatatripathy/pen/oNgPpyd
tripathy
Вот программное решение, которое генерирует stroke-dasharrayданный объект, определяющий, какие границы должны отображаться. Чтение кода может помочь вам понять, как он работает: codepen.io/lazd/pen/WNweNwy?editors=1010
lazd
30

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

Phrogz
источник
2

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

Wdebeaum
источник