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

#html #svg #inkscape #сss3

                    
Господа, столкнулся я значит с такой задачей:


Есть слайдер, все фото которые в него попадают(180px/180px), должны быть обрезаны
по контуру.




Для фигурной обрезки было решено использовать SVG маску.
В программе Inkeskape, создал холст 180/180 и набросал контур. 
Далее нашел в "И-нете" статьи о свойстве clip-path: url(...);. 
Скопировал из svg файла "путь", перенес все это дело в HTML песочницу и обрезал фотографию.
Результат - маленький контур (примерно 100*100px) обрезает большую фотографию.
Песочница на codepen

Подскажите, как увеличить этот контур относительно фотографии и можно ли это делать
через css?
    

Ответы

Ответ 1

У вас фотография имеет размер 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;
}