Question

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

在此的实际用例中，“圆圈”要复杂得多，我正在尝试允许对所有内容进行缩放/平移并遇到此问题，以上只是对相同问题的简单再现。 >

Answer 1

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

Answer 2

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

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

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

调整大小并移动后，SVG元素会被切断

2 个答案: