定位 svg:polygon 的更好方法

Question

SVG 元素<line>、<circle>、<rect>、<text>和<image>允许基于视口按 x 和 y 进行定位。此外，它们也可以相对定位。有没有什么办法可以做到这一点，而<polygon>不是将它包装在一个<svg>? 最接近的替代品<polygon>，<path>也有这个...问题。

Answer 1

根据@Michael Mullany 的精彩评论，我找到了该问题的解决方案。通过将多边形或路径放在<defs>标签旁边，它可以稍后在<use>标签中使用。该<use>标签允许设置 x 和 y 属性，其功能与其他简单形状的属性相同，例如<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>为百分比来动态缩放形状会很好，但它仍然可以通过变换进行缩放。