我有一个 svg 标签，里面有两个圆形元素，它们彼此相同。具有相同的 X、Y 和 R。但是当我将其中一个放在 clipPath 中并将其链接到图像或 div 时，剪切圆的位置将会改变。有什么问题吗？ 如果有人可以提供帮助，我们将不胜感激。
这是html代码:
<div class="clip-background"></div>
<svg width="500" height="500">
<clipPath id="clipping-area">
<circle cx="200" cy="200" r="100">
</clipPath>
<circle class="circle-border" cx="200" cy="200" r="100">
</svg>
这是CSS代码:
.clip-background{
position:absolute;
width:500px;
height:500px;
background-color:pink;
clip-path: url(#clipping-area);
-webkit-clip-path: url(#clipping-area);
}
.circle-border{
fill:none;
stroke:#666;
stroke-width:2;
}
最佳答案
发生这种情况是因为在您的 clipPath 中，圆的坐标被视为相对于页面左上角的坐标。而 SVG 中的圆坐标是相对于 <svg> 的左上角的.但是 SVG 受 HTML 上默认边距/填充的影响 <body> .所以不在同一个地方。
如果您以标准方式去除主体边距:
BODY {
padding: 0;
margin: 0;
}
你会看到它们都排成一行。
关于html - SVG 剪辑路径问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37879061/