Господа, столкнулся я значит с такой задачей:
Есть слайдер, все фото которые в него попадают(180px/180px), должны быть обрезаны по контуру.
Для фигурной обрезки было решено использовать SVG маску.
В программе Inkeskape, создал холст 180/180 и набросал контур.
Далее нашел в "И-нете" статьи о свойстве clip-path: url(...);.
Скопировал из svg файла "путь", перенес все это дело в HTML песочницу и обрезал фотографию.
Результат - маленький контур (примерно 100*100px) обрезает большую фотографию.
Песочница на codepen
Подскажите, как увеличить этот контур относительно фотографии и можно ли это делать через css?
Ответ
У вас фотография имеет размер 600х800px Поэтому и полигон в
Inkscape для clipPath нужно было выбрать точно такого же размера.
И тогда маску не нужно было бы уменьшать, увеличивать.
Второй путь - загружаете фотографию в Inkscape и прямо
сверху фотографии рисуете патч, который будет использован в качестве
clipPath Но это на будущее.
А сейчас можно пойти третьим путём.
Для увеличения размера клипа используем команду transform="scale(N)" Подбираете вручную. После увеличение clipPath сдвинется вправо и вниз.
Для позиционирования используете команду - transform="translate(X Y)"
В итоге формула для увеличения, позиционирования выглядит так:
transform="scale(3.3) translate(-11.7 -10)"
Внизу полный код, сравните его со своим исходным кодом и подкорректируйте немного CSS, так он был немного изменен мною для более точного позиционирования.
HTML, BODY {
height: 100%;
}
BODY {
background:
linear-gradient( #EEE 1px, transparent 2px),
linear-gradient( to right, #EEE 1px, transparent 2px);
background-size: 1em 1em;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
width: 100%;
height: 300px;
text-align: center;
white-space: nowrap;
font-family: Arial, sans-serif;
background-color: gray;
}
.catMask {
position: absolute;
top: 10px;
left: calc(50% - 50px);
width:250px;
height: auto;
-webkit-clip-path: url(#svgPath);
clip-path: url(#svgPath);
}
.maskItem {
width: 100%;
overflow: hidden;
}
Комментариев нет:
Отправить комментарий