как изменить размер обтравочного контура относительно его контейнера - PullRequest
Новая
       56

как изменить размер обтравочного контура относительно его контейнера

0 голосов
/ 23 сентября 2018

Я застрял.У меня есть кадр, в котором должна быть вырезана картинка.У меня есть svg-path для этой цели. Мне нужно установить высоту или ширину clip-path в процентах.Вот ссылка с моим кодом: https://jsfiddle.net/o6jn2x5h/31/

html: 

<div class="container">
  <div class = "frame">
     <img class="frame-image" src="https://i.postimg.cc/6pn2Cchw/plastic_frame.png">
     <img class="photo" src="https://i.postimg.cc/XJnSJjsd/index.jpg">
  </div>

</div>

 <svg  width="0" height="0">
    <defs>
        <clipPath id="svgPath">
            <path transform="scale(1.5)" fill="#FFFFFF" stroke="#000000" stroke-width="1.5794" stroke-miterlimit="10" d="m 1.5771027,1.6517761 0,55.8294389 c 0,0 2.009798,14.041225 11.7386873,22.695515 8.444108,7.511418 28.319723,13.893271 28.319723,13.893271 0,0 19.585789,-6.785685 27.542412,-13.118135 9.678786,-7.70307 11.569738,-23.470651 11.569738,-23.470651 l 0,-55.8294389 z"/>
        </clipPath>
     </defs>
 </svg>

css: 

  .container{
  height:80vh;
  background-color: gray;
  width: 100vw;
  padding-top:10vh;
  padding-left:10vw;
}
div.frame{
  margin:auto;
  height:50%
}
.frame-image{
  z-index:200;
  position:absolute;
  height:50%;
}
.photo{
  position:absolute;
  z-index:100;
  clip-path: url(#svgPath);
}
...