svg - パスによって描画されたポリゴンとSVGのポリゴンの例

Question

SVGを学びたいのですが、ポイント（ポリゴンを使用）またはパス（パス）を使用して同じ画像を動的にレンダリングする方法を学習しようとしています。

コードを比較できるように、SVGポリゴンとSVGパスの両方で同じポリゴン（三角形、正方形、五角形で十分です）の例をいくつか示します。どちらかで描かれた個々の画像を見つけることができますが、同じものはありません。

Answer 1

些細なことです。基本的にpoints、ポリゴンの属性を取得して、先頭に追加することでパスのd属性に変換できます。Mz

<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>