Возможно ли сделать SVG clipPath с ответом <path>?

Question

Я пытаюсь сделать отзывчивый SVG с растровым рисунком и сложной формой с клипом.

Если я использую <polygon> вместо <path>, чтобы создавать более простые формы, они чувствительны, но я не достиг того же пути, никаких идей о том, как достичь этого или даже если это возможно?

Вот код, который у меня есть and a working demo.

<!-- Path Test--> 
<div class="mainContainer"> 
    <div class="assetContainer"> 
    <div class="asset"> 
     <svg width="0" height="0"> 
     <defs> 
      <clipPath id="pathTest"> 
      <path d="M 0.1562378,0.5 H 323.76366 c 0,0 -20.4244,6.3661 -21.48541,47.4801 -1.06101,41.1141 19.8939,42.7056 21.22016,43.2361 1.32626,0.5305 -323.3421722,0 -323.3421722,0 0,0 19.6286472,-1.8568 19.8938992,-42.9708 C 20.315389,7.1313 0.1562378,0.5 0.1562378,0.5 Z" 
      /> 
      </clipPath> 

      <pattern x="0" y="0" width="84" height="70" id="img7" patternUnits="userSpaceOnUse"> 
      <image xlink:href="http://i.imgur.com/T66UMJs.png" width="84" height="70" x="0" y="0" /> 
      </pattern> 
     </defs> 
     <rect x="0" y="0" width="100%" height="100%" fill="url(#img7)" clip-path="url(#pathTest)" /> 
     </svg> 
    </div> 
    </div> 
</div> 


/* CSS */ 

svg { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

.assetContainer { 
    overflow: visible; 
    height: 100px; 
    position: relative; 
    width: 100%; 
} 

.asset { 
    position: absolute; 
    width: 100%; 
    height: 70px; 
    bottom: 0px; 
    left: 0px; 
    cursor: pointer; 
    z-index: auto; 
    left: 0px; 
} 

.container { 
    width: 400px; 
    height: 400px; 
    background: gray; 
    position: relative; 
    margin-bottom: 20px; 
} 

.mainContainer { 
    background: rebeccapurple; 
    bottom: 0; 
    left: 0; 
    width: 100%; 
    height: 100px; 
    position: absolute; 
    //overflow: hidden; 
} 

Answer 1

Преобразование ваш <clipPath> использовать clipPathUnits="objectBoundingBox". При использовании объектов objectBoundingBox ваши координаты пути клипа сопоставляются с ограничивающей рамкой элемента, к которому они применяются. (0,0) отображается в верхнем левом углу элемента. (1,1) отображается в нижнем правом углу.

Вам необходимо переопределить свой путь (или применить преобразование для преобразования коордов в этот диапазон). Но как только вы это сделаете, он автоматически масштабируется, чтобы соответствовать всем вашим требованиям.