Страницы

Поиск по вопросам

воскресенье, 9 июня 2019 г.

Каким образом меняется размер clipPath?

Господа, столкнулся я значит с такой задачей:
Есть слайдер, все фото которые в него попадают(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; }

face

Комментариев нет:

Отправить комментарий