时间戳

首页 > 解决方案 > 调整大小+移动时 SVG 元素被切断

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

问题描述

给定以下嵌入在 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

解决方案

当您将一个元素放入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>

推荐阅读