У меня есть проблема с выравниванием и преобразованием SVG clipPath.
Вот мой HTML код:SVG clipPath-координаты issue
<div class="box"></div>
<svg height="100%" width="100%" viewBox="0 0 600 600" >
<clipPath id="clipped">
<circle cx="100" cy="100" r="50"></circle>
</clipPath>
<circle cx="100" cy="100" r="50" fill="none" stroke="#000000"></circle>
</svg>
А вот CSS:
body{
margin:0;
padding:0;
}
.box{
position:absolute;
width:100%;
height:100%;
background:pink;
clip-path: url(#clipped);
-webkit-clip-path: url(#clipped);
}
У меня есть два круга внутри моего СВГ с одной и той же X и Y и R. Как вы можете видеть мой Элемент SVG имеет ширину 100% и высоту 100%, а viewBox = «0 0 600 600», поэтому содержимое svg будет преобразовано путем изменения размера окна браузера, за исключением обрезанной области этого div. Фактически, когда я проверяю элементы с devTools, положение обоих кругов одинаковое, но область маскирования этого DIV не находится в правильном месте. когда я удалю viewBox, это будет нормально, но я хочу, чтобы мои svg приспосабливались к экрану. поскольку я знаю, что svg viewBox не влияет на clipPath, так что я могу сделать, чтобы сопоставить скрытую область в нужном месте поверх обоих кругов, даже когда я устанавливаю viewBox.
Here is the CodePen
Спасибо.
Каков результат, который вы ищете? SVG имеет 100% x 100% тела, тогда как 'div' имеет только 300px x 300px, поэтому они не будут совпадать. – Harry
@Harry Розовая область должна соответствовать поглаженному кругу в примере codepen. на самом деле это не имеет значения, какова ваша ширина или высота div. это не повлияет на результат. –
Это не соответствует тому, что я говорю, и причина в том, что ваш SVG масштабируется, а ваш 'div' - нет. – Harry