2

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

4

2 回答 2

6

根据@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>为百分比来动态缩放形状会很好，但它仍然可以通过变换进行缩放。

于 2013-11-05T21:47:00.583 回答
0

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

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

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

于 2013-11-05T14:02:05.867 回答