Question

我想使用相对值（视口的百分比）在SVG中放置一个元素，然后旋转它。

这是我试图实现这个目标：

<svg version="1.1"
  baseProfile="full"
  width="100%" height="100%"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100% 100%" preserveAspectRatio="xMinYMin meet">
  <defs>
    <g id="corner">
      <path d="M 0 10000 L 0 0 L 10000 0" fill="transparent" stroke="black" stroke-width="3" />
    </g>
  </defs>
  <use transform="translate(5 5)" xlink:href="#corner" />


  <!-- Nice try! Not works :) -->
  <g transform="translate(50% 50%)">
    <use transform="rotate(45)" xlink:href="#corner" />
  </g>


  <!-- Nice try! Not works too. Now viewpot/viewbox gets clipped :) -->
  <svg width="100%" height="100%" x="50%" y="50%">
    <use transform="rotate(45)" xlink:href="#corner" />
  </svg>
</svg>

第一种方法由于未知原因不起作用。也许翻译不接受百分比。
第二种方法正确移动和旋转对象。但是视口被剪切了，我没有得到理想的结果，因为我的对象变得不可见，但是剪切。

Answer 1

这是代码，适用于我的情况：

<svg version="1.1"
  baseProfile="full"
  width="100%" height="100%"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <g id="corner">
      <path d="M 0 10000 L 0 0 L 10000 0" fill="transparent" stroke="black" stroke-width="3" />
    </g>
  </defs>
  <use transform="translate(5 5)" xlink:href="#corner" />

  <svg width="100%" height="100%" x="50%" y="50%" overflow="visible">
    <use transform="rotate(45)" xlink:href="#corner" />
  </svg>
</svg>

致https://stackoverflow.com/users/1038015/robert-longson

的信用

使用百分比在SVG中翻译对象

1 个答案: