调整大小+移动时 SVG 元素被切断答案

【问题标题】：SVG element gets cut off when resized+moved调整大小+移动时 SVG 元素被切断
【发布时间】：2018-07-11 13:20:20
【问题描述】：

鉴于 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 元素大小的影响。为什么会这样？如何显示整个圈子？

在实际用例中，“圆圈”要复杂得多，我试图允许对所有内容进行缩放/平移，但遇到了这个问题，以上只是对同一问题的简单再现。

【问题讨论】：

标签： svg

【解决方案1】：

当您将svg 放入另一个svg 元素中时，其大小默认为其容器的相同大小，并且除非您在内部svg 元素上设置overflow:visible，否则不会显示该边界框之外的任何内容。

<!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>

【讨论】：

【解决方案2】：

最外层<svg> 元素的overflow 的默认值为visible。 SVG 的子元素（包括子<svg> 元素）的默认值overflow 是hidden。此行为在 SVG 规范中指定：

https://www.w3.org/TR/SVG/single-page.html#masking-OverflowAndClipProperties

这就是你的圈子被切断的原因。如果您希望圆圈在其父 <svg> 元素之外可见，则必须在其上设置 overflow: visible。正如@Shelvacu 所建议的那样。

【讨论】：