svg - svg:polygon を配置するより良い方法

Question

SVG 要素<line>、<circle>、<rect>、<text>および を<image>使用すると、ビューポートに基づいて x および y で配置できます。さらに、それらは相対的に配置することもできます。<polygon>でラップするよりもこれを達成する方法はあります<svg>か? 、 、の最も近い代替品に<polygon>も<path>この...問題があります。

Answer 1

@Michael Mullany による優れたコメントに基づいて、この問題の解決策を見つけることができました。ポリゴンまたはパスをタグの横に置くこと<defs>で、後でタグで使用できます<use>。この<use>タグを使用すると、 、 、 <line>、<circle>、<rect>、<text>

http://jsbin.com/iqEkAsE/2

<svg width="100%" height="100%">
  <defs >
  <path id="Triangle"
    d="M 1 1 L 200 1 L 100 200 z"
    fill="orange" 
    stroke="black" 
    stroke-width="3" />
  </defs>
  <use x="33%" y="33%" xlink:href="#Triangle"/>
  <use transform="scale(-1)" x="-66%" y="-66%" xlink:href="#Triangle"/>
</svg>

の幅と高さのプロパティをパーセントに設定することで形状を動的にスケーリングできると便利ですが、<use>それでも変換でスケーリングできます。

Answer 2

変換 (平行移動、回転、拡大縮小) を使用します。これが正しい方法です。

他の形状では、x、y 座標で定義された点を使用できます。これは、形状定義の一部にすぎないためです (つまり、円を定義するには、中心点と半径が必要です)。

理論的には、バウンディング ボックスを使用して要素を配置できますが、バウンディング ボックスは「設定可能」ではありません (setBBox方法はありません)。getBBox()