Частичная граница/штрих с использованием SVG

Я использую svg/d3 для создания диаграммы из прямоугольных элементов.

Каков наилучший способ добавления частичной границы/штриха для каждого прямоугольника (только поверх прямоугольника)?

Спасибо


javascript svg html d3.js stroke
person OriWei    schedule 28.07.2013    source источник
comment
Вы имеете в виду что-то вроде свойства dasharray?   -  person Lars Kotthoff    schedule 28.07.2013
comment
Возможный дубликат Как установить ширина штриха:1 только на определенных сторонах фигур SVG?   -  person Ben    schedule 12.10.2015

Ответы (1)


arrow_upward
7
arrow_downward

Я не думаю, что SVG поддерживает обводку только частей прямоугольника или пути — обводка не похожа на границу CSS. У вас осталось несколько других вариантов, каждый из которых требует дополнительной работы:

  • Обведите весь rect и примените clipPath, чтобы удалить три других края - вероятно, работает лучше всего, если вы делаете прямоугольники больше, чем необходимо.

  • Примените заливку линейным градиентом к каждому прямоугольнику, используя определение градиента, чтобы показать «граница» в верхней части фигуры.

  • Добавьте отдельный элемент line в качестве границы для каждого rect.

  • Используйте свойство stroke-dasharray (документы), чтобы установить определение дефиса, где " тире" покрывает только верхнюю часть rect. Это может быть сложно сделать правильно, но я подозреваю, что это будет не слишком сложно, так как штрих, вероятно, начинается в верхнем левом углу фигуры.

person nrabinowitz    schedule 28.07.2013