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>的width和height属性设置为百分比来动态缩放形状，但仍然可以通过变换进行缩放，这将是很好的。

Answer 2

使用转换（平移，旋转，缩放），这是正确的方法。

其他形状允许您使用由x，y坐标定义的点，因为它只是形状定义的一部分（即，如何定义圆，您需要中心点和半径）。

理论上你可以使用它的边界框来定位一个元素，但是边界框不是“可设置的”（没有setBBox方法），只有getBBox()

更好的方法来定位svg：polygon

2 个答案: