Question

我的视口顶部出现了一些不需要的剪辑。看起来如果svg元素的任何部分位于其视口的一侧，即使在缩放时也会保持裁剪。有没有办法禁用它来获得我想要的第三组效果？

http://jsbin.com/ukujad/5/edit?html,live

<svg width="400" height="400">
  <rect class="bg" height="100%" width="100%" />

  <!-- what i get -->
  <g transform="translate(0, 400) scale(1, -0.5)">
    <svg x="10%" y="0px" width="20%" height="100%">
      <rect x="0" y="350px" height="100px" width="100%" />
    </svg>
    <svg x="10%" y="0px" width="20%" height="100%">
      <rect x="0" y="0px" height="100px" width="100%" />
    </svg>
  </g>

  <!-- how it looks with out the scale -->
  <g transform="translate(0, 400) scale(1, -1)">
    <svg x="40%" y="0px" width="20%" height="100%">
      <rect x="0" y="350px" height="100px" width="100%" />
    </svg>
    <svg x="40%" y="0px" width="20%" height="100%">
      <rect x="0" y="0px" height="100px" width="100%" />
    </svg>
  </g>

  <!-- what i want -->
  <g transform="translate(0, 400) scale(1, -1)">
    <svg x="70%" y="0px" width="20%" height="100%">
      <rect x="0" y="175px" height="50px" width="100%" />
    </svg>
    <svg x="70%" y="0px" width="20%" height="100%">
      <rect x="0" y="0px" height="50px" width="100%" />
    </svg>
  </g>
</svg>

Answer 1

只需添加overflow =“visible”

即可

  <g transform="translate(0, 400) scale(1, -0.5)">
    <svg x="10%" y="0px" width="20%" height="100%" overflow="visible">
      <rect x="0" y="350px" height="100px" width="100%" />
    </svg>
    <svg x="10%" y="0px" width="20%" height="100%" overflow="visible">
      <rect x="0" y="0px" height="100px" width="100%" />
    </svg>
  </g>

即使在使用SVG进行缩放后，也会出现不需要的视口剪

1 个答案: