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

219
13 марта 2018, 01:31

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

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

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

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

Answer 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; 
}
<div class="wrapper"> 
 
 
 <!-- image start --> 
<img src="https://www.goldennumber.net/wp-content/uploads/2013/08/florence-colgate-england-most-beautiful-face.jpg" alt="face" class="catMask"> 
<!-- image end --> 
    
<!-- mask start --> 
<!-- Created with Inkscape --> 
<svg height="0" width="0" class="maskItem"   viewBox="0 0 600 800"> 
  <defs> 
     <clipPath id="svgPath" transform="scale(3.3) translate(-11.7 -10)"> 
        <path fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m 21.839862,14.517191 c 6.543622,-2.443842 17.518669,6.349048 17.518669,6.349048 0,0 7.88428,-1.486434 11.87507,-1.528474 4.67538,-0.04925 11.404772,1.881199 11.404772,1.881199 0,0 4.768975,-6.719246 8.112672,-7.995098 7.503869,-2.863245 10.884649,0.342529 11.875072,1.8812 8.481775,13.176866 1.8812,27.159819 1.8812,27.159819 C 93.780821,65.991507 80.780864,77.73405 71.456496,84.709438 68.017059,87.12391 55.632924,92.733566 50.763301,92.822111 47.510105,92.881236 37.5689,90.338555 26.895584,83.063394 5.929735,68.77262 14.90294,45.43941 14.90294,45.43941 c 0,0 -6.0107737,-13.116858 -1.293325,-23.162272 1.586908,-3.379188 2.127713,-5.480838 8.230247,-7.759947 z" 
       style="fill:none;stroke:#000000;stroke-width:0.23278654px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"> 
         </path> 
      </clipPath> 
  </defs> 
</svg> 
<!-- mask end --> 
    
</div>

READ ALSO
Проблема с переносом скрипта из HTML в JS файл?
HTML

Проблема с переносом скрипта из HTML в JS файл?

У меня возникла проблема переноса скрипта в scriptjs

 242
Дает ли htmlspecialchars полную неуязвимость к XSS?
HTML

Дает ли htmlspecialchars полную неуязвимость к XSS?

ЗдраствуйтеМожно ли полностью убезопасить страницу от XSS через input если при помощи htmlspecialchars преобразовать все "<" и ">" на соответствующие...

 151
Установка приложения через сайт
HTML

Установка приложения через сайт

Слышал что есть механизм установки приложения через сайтТо есть на сайте есть кнопка установить приложение, оно скачивается и появляется...

 271
Не меняется сумма в input, почему?
HTML

Не меняется сумма в input, почему?

Добрый вечер! На сайте есть мини-магазинТам действует система скидок, если количество больше чем 12, то цена меняется, но она изменилась только...

 220