SVG clipPath проблема

У меня есть тег 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;
}

здесь.

Источник

1 ответ

Решение

Это происходит потому, что в вашем clipPath координаты круга обрабатываются как относящиеся к верхнему левому углу страницы. В то время как координаты окружности в SVG относятся к верхнему левому углу <svg>, Но на SVG влияют поля / отступы по умолчанию в HTML <body>, И так не располагается на одном месте.

Если вы избавляетесь от полей тела стандартным способом:

BODY {
  padding: 0;
  margin: 0;
}

вы увидите, что они оба выстроились в линию.

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

Источник
Другие вопросы по тегам