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，我还能做些什么来匹配两个圆圈顶部正确位置的蒙版区域。
Here is the CodePen

感谢。

Answer 1

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

如果您在SVG中的元素上使用了clipPath，那么会受到缩放的影响。

SVG clipPath坐标问题

1 个答案: