Обтравочная маска для SVG

Question

Я пытаюсь создать меню, которое, когда вы наводите курсор на одну из ссылок, показывает нарезанное изображение в фоновом режиме. Я смог создать что-то, что работает только в Chrome с помощью CSS3 обтравочных масок.

Код для получения этих форм масштабироваться с шириной браузера (+1 для процентов!) И работать отлично за исключением двух вещей: один в том, что маска не клип форму мне нужно (см яркое изображение, чтобы увидеть форму), и это нецелесообразно использовать с Firefox и IE.

#music_hover { 
    z-index: 5; 
    width: 100%; 
    height: 100%; 
    background: red; 
    -webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 70% 100%); 
    clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 70% 100%); 
    float: right; 
    position: absolute; 
    background: url(../music.jpg) bottom right no-repeat; 
    display: none; 
} 

Теперь, чтобы найти что-то, поддерживаемое другими браузерами, я переключился на SVG-изображения. Я сделал это в [CodePen]. Моя проблема с моим текущим решением заключается в том, что срезы не «остаются вместе», когда браузер не является 1920x1080. 3 среза в первом ряду придерживаются вершины, а второй ряд - к нижней, образуя белую полоску в середине страницы. Срезки также не масштабируются, так как у них есть точные точки для рисования фигуры (в отличие от процентов от обтравочной маски).

HTML:

<svg version="1.1" id="novel_Position" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 773.685 540.94"> 
    <defs> 
     <pattern id="novel_BG" patternUnits="userSpaceOnUse" width="100%" height="100%"> 
      <image xlink:href="http://loiseau-noir.com/seb/novel.jpg" x="0" y="0" width="100%" height="100%" /> 
     </pattern> 
    </defs> 
    <path d="M420,1.058H0v539.569l696.512,0.313c0.031-72.714,29.516-138.541,77.173-186.197L420,1.058z" fill="red"/> 
</svg> 

CSS:

#novel_Position { 
    z-index: 5; 
    width: 40.5%; 
    top: 0; 
    left: 0; 
    position: fixed; 
} 

Теперь, если все, что не ясно, страница должна работать так:

Answer 1

Вы можете сделать это без обрезки масок, просто используя преобразования и переполнение: скрытые. и некоторые HTML структура

html, body {height: 100%;} 
 

 
.base { 
 
    height: 100%; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 

 
.part { 
 
    position: absolute; 
 
    width: 50%; 
 
    height: 50%; 
 
    overflow: hidden; 
 
} 
 
.part:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-size: cover; 
 
    transform-origin: inherit; 
 

 
} 
 

 
.NW { 
 
    left: 0px; 
 
    top: 0px; 
 
    transform: skewX(30deg); 
 
    transform-origin: bottom right; 
 
} 
 

 
.NW:after { 
 
    transform: skewX(-30deg); 
 
    background-image: url("http://placekitten.com/g/200/300"); 
 
} 
 

 
.N { 
 
    top: 0px; 
 
    right: 0px; 
 
    transform: rotate(-60deg) skewX(-30deg); 
 
    transform-origin: bottom left; 
 
    overflow: hidden; 
 
} 
 

 
.N:after { 
 
    transform: skewX(30deg) rotate(60deg) translateX(-50%) ; 
 
    background-image: url("http://placekitten.com/g/600/400"); 
 
} 
 

 

 
.NE { 
 
    right: 0px; 
 
    top: 0px; 
 
    transform: skewX(-30deg); 
 
    transform-origin: bottom left; 
 
} 
 

 
.NE:after { 
 
    transform: skewX(30deg); 
 
    background-image: url("http://placekitten.com/g/200/300"); 
 
} 
 

 

 
.SW { 
 
    left: 0px; 
 
    bottom: 0px; 
 
    transform: skewX(-30deg); 
 
    transform-origin: top right; 
 
} 
 

 
.SW:after { 
 
    transform: skewX(30deg); 
 
    background-image: url("http://placekitten.com/g/200/300"); 
 
} 
 

 
.S { 
 
    bottom: 0px; 
 
    right: 0px; 
 
    transform: rotate(60deg) skewX(30deg); 
 
    transform-origin: top left; 
 
} 
 

 
.S:after { 
 
    transform: skewX(-30deg) rotate(-60deg) translateX(-50%) ; 
 
    background-image: url("http://placekitten.com/g/200/300"); 
 
} 
 

 

 
.SE { 
 
    right: 0px; 
 
    bottom: 0px; 
 
    transform: skewX(30deg); 
 
    transform-origin: top left; 
 
} 
 

 
.SE:after { 
 
    transform: skewX(-30deg); 
 
    background-image: url("http://placekitten.com/g/200/300"); 
 
} 
 

 
.center { 
 
    position: absolute; 
 
    width: 20%; 
 
    height: 0%; 
 
    left: 40%; 
 
    top: 50%; 
 
    z-index: 10; 
 
} 
 

 
.roundcenter { 
 
    width: 100%; 
 
    padding: 50% 0; 
 
    border-radius: 50%; 
 
    background-color: lightgreen; 
 
    margin-top: -50%; 
 
}

<div class="base"> 
 
<div class="part NW"></div> 
 
<div class="part N"></div> 
 
<div class="part NE"></div> 
 
<div class="part SW"></div> 
 
<div class="part S"></div> 
 
<div class="part SE"></div> 
 
<div class="center"> 
 
<div class="roundcenter"> 
 
</div> 
 
</div> 
 
</div>