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

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

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


svg html vector-graphics inkscape
person user782860    schedule 23.01.2012    source источник

Ответы (3)


arrow_upward
174
arrow_downward

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

person Erik Dahlström    schedule 25.01.2012
comment
Как мы можем показать штрих только поверх прямоугольного элемента? - person Suresh; 22.08.2018
comment
Не могли бы вы объяснить, почему определенные числа в определенных позициях дают такой эффект? - person JacobIRR; 30.04.2019
comment
@JacobIRR ссылается на определение свойства «stroke-dasharray» (ссылка в ответе). Идея здесь состоит в том, чтобы сопоставить длину штриха со сторонами прямоугольника, а зазор между штрихами и стороной, которая не должна иметь штриха. - person Erik Dahlström; 06.05.2019
comment
Я только что обновил ваше решение по этой ссылке codepen.io/shaswatatripathy/pen/oNgPpyd. - person tripathy; 16.01.2020
comment
Вот программное решение, которое генерирует stroke-dasharray для объекта, определяющего, какие границы должны отображаться. Чтение кода может помочь вам понять, как это работает: codepen.io/lazd/pen/WNweNwy. ?редакторы=1010 - person lazd; 02.08.2020

arrow_upward
32
arrow_downward

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

person Phrogz    schedule 23.01.2012

arrow_upward
2
arrow_downward

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

person wdebeaum    schedule 23.01.2012