SVG 剪辑路径问题

Question

我有一个 svg 标签，里面有两个圆形元素，它们彼此相同。具有相同的 X 和 Y 和 R。但是当我将其中一个放在 clipPath 中并将其 link 到图像或 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;
}

codepen here.

Answer 1

发生这种情况是因为在您的 clipPath 中，圆的坐标被视为相对于页面左上角的坐标。而 SVG 中的圆坐标是相对于 <svg> 的左上角的。但是 SVG 受 HTML <body> 上默认 margins/paddings 的影响。所以不在同一个地方。

如果您以标准方式去除正文边距：

BODY {
  padding: 0;
  margin: 0;
}

你会看到他们都排成一行。

http://codepen.io/anon/pen/VjjOzm

SVG 剪辑路径问题

SVG clipPath issue

html

css

svg

clip-path