代码之家 › 专栏 › 技术社区 › Shelvacu

svg元素在调整大小+移动时被切断

svg

Shelvacu · 技术社区 · 8 年前

假设HTML页面中嵌入了以下SVG:

<!DOCTYPE html>
<html>
  <body>
    <svg style="width:100px;height:100px;border:1px solid black">
      <svg y="-25">
        <g transform="scale(2 2)">
          <circle cx="25" cy="37.5" r="25" style="fill:black" />
        </g>
      </svg>
    </svg>
  </body>
</html>

它显示一个被截断的圆。截止值受Firefox和Chrome中最外层SVG元素的大小影响。为什么会这样?我怎样才能显示整个圆圈?

在实际的用例中,这个“圆”要复杂得多,我试图允许缩放/平移所有东西,并且遇到了这个问题,上面的只是对同一个问题的简单再现。

2 回复 | 直到 8 年前

Shelvacu 8 年前

当你把一个 svg 在另一个里面 SVG格式 元素,其大小在其容器中默认为相同的大小,并且除非设置 overflow:visible 在内部svg元素上。

<!DOCTYPE html>
<html>
  <body>
    <svg style="width:100px;height:100px;border:1px solid black">
      <svg y="-25" style="overflow:visible">
        <g transform="scale(2 2)">
          <circle cx="25" cy="37.5" r="25" style="fill:black" />
        </g>
      </svg>
    </svg>
  </body>
</html>