パスで描かれたポリゴンの例SVGのポリゴン

Question

私はSVGを学びたいと思いますが、ポイント（ポリゴン）またはパス（パス）を使って同じイメージをレンダリングする方法を学ぼうとしています。

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

Answer 1

それは些細です：あなたは基本的に多角形のpoints属性を取り、Mを付加し、zを追加することにより、パスのd属性に変換することができます。 see live on 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>