0

我的视口顶部出现了一些不想要的剪裁。看起来如果 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>
4

1 回答 1

1

只需添加溢出=“可见”

  <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>
于 2013-06-21T14:02:13.050 回答