SVG угловой многоугольник в середине линии, используя маркер и defs - PullRequest
Новая
       21

SVG угловой многоугольник в середине линии, используя маркер и defs

0 голосов
/ 17 апреля 2020

Итак, у меня есть базовый тег c <line />: 

<line 
    x1="20"
    y1="20"

    x2="40"
    y2="40"
    stroke="blue"
    fill="blue"

/>

от (20,20) до (40,40)

И я хочу поместить стрелку в середину та линия, которая указывает на (x2,y2),

Так что я нашел хороший многоугольник со стрелкой на целых rnet: 

<polygon
    points="
          2,7
          0,0
          11,7
          0,14"
    stroke="red"
    fill="red" 
/>

и для того, чтобы вставить в середину, я просто взял midX и midY, поэтому многоугольник выглядел так:

и он работает хорошо, единственное, что нужно сделать, это повернуть стрелку в направлении (x2, y2), добавив атрибут transform к Polygon.

Дело в том, что я хочу сделать это проще для меня, вместо того, чтобы каждый раз вычислять угол, я нашел здесь хорошие ссылки на stackoverflow:

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

И есть решение с использованием SVG <marker> element , и я подумал, что это может соответствовать моей проблеме, но я просто не знаю, как .

Заранее спасибо!

...