Примеры полигонов, нарисованных путем пути к полигону в SVG

Я хотел бы изучить SVG и пытаюсь узнать, как одно и то же изображение можно визуализировать, используя либо точку (с полигоном), либо динамически по пути (путь).

Я бы хотел, чтобы несколько примеров многоугольника SAME (треугольник, квадрат и пятиугольник были достаточно для начала) в BOTH SVG polygon AND SVG path, так что я могу сравнить код. Я могу найти отдельные образы, нарисованные обоими, но ни один из них не является САМОЙ.

Ответы

Ответ 1

Это тривиально: вы можете в основном взять атрибут points многоугольника и превратить его в атрибут пути d, добавив M и добавив z. посмотреть вживую на jsFiddle:

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polygon points="20,20 100,20 100,100 30,110"/>
  <path        d="M20,20 100,20 100,100 30,110z" fill="green" transform="translate(100,0)"/>
</svg>