SVG clipPath issue

У меня есть тэг svg с двумя элементами окружности внутри, которые являются одинаковыми друг с другом. с теми же X и Y и R., но когда я помещаю один из них в clipPath и привязываю его к изображению или div, положение обрезанного круга изменится. в чем проблема? Было бы полезно, если кто-то может помочь.SVG clipPath issue

Вот 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.

источник

2016-06-17 Navid Nazarian

Вы не можете редактировать вопрос таким образом, что ответ уже не имеет смысла. Если у вас есть дополнительные вопросы, задайте их отдельно. –

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

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

BODY { 
    padding: 0; 
    margin: 0; 
}

вы увидите, они оба в составе.

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

источник

2016-06-17 10:31:55

Правильно, но в моем основном проекте у меня все еще есть такая же проблема, и даже размер обрезанного круга меньше, чем другой. Я установил высоту svg на 100%, а ширина - на авто, но даже в фиксированном размере в пикселе, у меня такая же проблема! –

Когда я проверяю элемент обрезанного круга в инструментах chrome dev, он выделяет элемент в нужном месте так же, как и другой круг, но часть маскированного изображения находится в другом положении и в верхней части страницы и с меньшим размером! У вас есть представление об этом? Хотел бы я показать вам скриншот ... @Paul LeBeau –

SVG clipPath issue

ответ

Смежные вопросы