svg - 定位 svg :polygon 的更好方法

Question

SVG 元素 <line> , <circle> , <rect> , <text>和 <image>允许基于视口(viewport)通过 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> 的宽度和高度属性来动态缩放形状会很好到一个百分比，但它仍然可以通过转换进行缩放。