Можем ли мы иметь линию SVG с обводкой, заливкой и шириной обводки - PullRequest
Новая
       55

Можем ли мы иметь линию SVG с обводкой, заливкой и шириной обводки

0 голосов
/ 18 октября 2018

У меня есть координаты и заданная форма в качестве входных данных. Пожалуйста, смотрите код ниже.Он дает контур формы с координатами. 

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
</svg>

Могу ли я иметь края многоугольника в виде столбцов. Они должны выглядеть как отдельные линии или контуры, каждая из которых имеет заливку разных цветов, обводки и ширины обводки.Я попробовал приведенный ниже фрагмент кода, но вместо заливки я получаю обводку. Мне нужен черный обводка и цвет заливки. 

<svg height="210" width="500">
 <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="6"></line>
<line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="6" fill="green"></line>
<line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="6" fill="blue"></line>
</svg>

** Код с многоугольником и линиями ** 

<svg height="500" width="500">
 <polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
     <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="16"></line>
      <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="red" fill="red" stroke-width="8"></line>
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="green"></line>
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="blue" stroke-width="8" fill="green"></line>
    <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="blue"></line>
     <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="green" stroke-width="8" fill="blue"></line>
 </svg>

**

** Обновление: если я удаляю линию с одним ребром без заливки и просто обводкой, это плохо видно.Я хочу внешнего удара.Это просто прикоснуться к концу. Пожалуйста, смотрите ниже код. **

<svg height="500" width="500">
 <polygon points="200,10 250,190 160,210" style="fill:transparent;stroke:purple;stroke-width:1" />
     <line x1="200" y1="10" x2="250" y2="190" stroke-linejoin="square" stroke-linecap="square" stroke="black" fill="red" stroke-width="1"></line>  
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="green"></line>
    <line  x1="250" y1="190" x2="160" y2="210" stroke-linejoin="square" stroke-linecap="square" stroke="blue" stroke-width="8" fill="green"></line>
    <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="black" stroke-width="16" fill="blue"></line>
     <line  x1="160" y1="210" x2="200" y2="10" stroke-linejoin="square" stroke-linecap="square" stroke="green" stroke-width="8" fill="blue"></line>
 </svg>

Изображение ниже: O / P изображение

1 Ответ

0 голосов
/ 18 октября 2018

Если вы комбинируете подход многоугольника и линии, вы можете получить разумный результат.

  • Сзади поставьте черный сингл <polygon>, содержащий все линии.
  • Иодин <line> для каждой из линий, чтобы дать индивидуальные цвета.Они имеют меньшую ширину обводки, чем многоугольник.

Если вы установите для многоугольника использование круглых соединительных линий и установите для линий круглые заглушки, это поможет замаскировать уродство на углах.

Если вам нужны более аккуратные углы митра, то это усложняется.Вам либо придется самостоятельно перейти к определению контуров своих линий.Например, сделав каждую из трех линий заполненной трапециевидной формой. 

<svg height="500" width="500">
  <polygon points="200,10 250,190 160,210" stroke-linejoin="round" stroke="black" fill="none" stroke-width="16" />

  <line x1="200" y1="10" x2="250" y2="190" stroke-linecap="round" stroke="red" fill="none" stroke-width="10"/>
  <line  x1="250" y1="190" x2="160" y2="210" stroke-linecap="round" stroke="green" fill="none" stroke-width="10"/>
    <line  x1="160" y1="210" x2="200" y2="10" stroke-linecap="round" stroke="blue" fill="none" stroke-width="10"/>
 </svg>
...