SVG clipPath坐标问题

Question

我在SVG clipPath对齐和转换时遇到一些问题。
这是我的HTML代码：

<div class="box"></div>
<svg height="100%" width="100%" viewBox="0 0 600 600" >
  <clipPath id="clipped">
    <circle cx="100" cy="100" r="50"></circle>
  </clipPath>
  <circle cx="100" cy="100" r="50" fill="none" stroke="#000000"></circle>
</svg>

这是CSS：

body{
  margin:0;
  padding:0;
}
.box{
  position:absolute;
  width:100%;
  height:100%;
  background:pink;
  clip-path: url(#clipped);
  -webkit-clip-path: url(#clipped);
}

我的svg中有两个圆圈，它们的X，Y和R相同。您可以看到我的SVG元素的宽度为100％，高度为100％，并且viewBox =“ 0 0 600 600”，因此svg将通过调整浏览器窗口的大小进行转换，但该div的裁剪区域除外。 实际上，当我使用devTools检查元素时，两个圆的位置相同，但是该DIV的遮罩区域不在正确的位置。 当我删除viewBox时，可以，但是我希望我的svg适合屏幕显示。 我知道svg viewBox不会影响clipPath，所以即使设置了viewBox，我该怎么做才能匹配两个圆圈顶部正确位置的遮罩区域。
这是CodePen

谢谢。

Answer 1

在HTML元素上使用SVG clipPath时，它按原样使用。 按照定义。 它不受其父SVG中可能存在的任何缩放的影响。

如果您在使用SVG元素上的clipPath， 它将在缩放的影响。