SVG clipPath问题

Question

我有一个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;
}

Codepen在这里。

Answer 1

发生这种情况是因为在您的clipPath中，圆的坐标被视为相对于页面左上角。 SVG中的圆坐标相对于<svg>左上角。 但是SVG受HTML <body>上的默认边距/填充的影响。 因此不在同一位置。

如果您以标准方式摆脱身体边缘：

BODY {
  padding: 0;
  margin: 0;
}

您会看到它们都排成一行。

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

SVG clipPath问题

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-06-17 10:31:55

SVG clipPath问题

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-06-17 10:31:55

解决方案1
2 已采纳 2016-06-17 10:31:55