Как выровнять два скрытых изображения svg в одной строке

Question

У меня есть svg-маска, и маска отлично работает на любом изображении в хроме, но не позволяет выравнивать два изображения. Когда я выравниваю два изображения и применяю маску, он отображает только 1 изображение, и когда я пишу текст перед изображением, текст скрывает изображение.

Это мой SVG код

<svg width="0" height="0"> 
    <defs> 
     <clipPath id="shape"> 
      <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355 
-355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47 
-363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" /> 
     </clipPath> 
    </defs> 
</svg> 


<img class='photo_rectangle_inverse' src='http://i.imgur.com/NR6kefg.jpg' /> 

<img class='photo_rectangle_inverse' src='http://i.imgur.com/DXaH323.jpg' /> 

А вот мой CSS код

.photo_rectangle_inverse { 
    height:160px; 
    width:170px; 
    -webkit-clip-path: url(#shape); 
    clip-path: url(#shape); 
} 

Так что это, как предполагается, чтобы отобразить два изображения, но он отображает только один, как этот

Но обычно предполагается отображать маску на двух им возраст

<img class='photo_rectangle_inverse' src='http://i.imgur.com/NR6kefg.jpg' /> 

    <img class='photo_rectangle_inverse' src='http://i.imgur.com/DXaH323.jpg' /> 

Вот Jsfiddle

Как Dispaly и выровнять эти два изображения SVG замаскированы на одной и той же линии? Thanks

Answer 1

Вы используете функциональность SVG translate(), которая перемещает форму. Это заставляет фигуру не всегда находиться в нужном месте каждый раз.

Что вам нужно сделать, чтобы исправить это, добавить кусочек CSS, чтобы помочь разобраться в позиции. что будучи -webkit-transform:translateZ(1px);

.photo_rectangle_inverse { 
 
    height: 160px; 
 
    width: 170px; 
 
    -webkit-clip-path: url(#shape); 
 
    clip-path: url(#shape); 
 
    -webkit-transform: translateZ(1px) 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
    <clipPath id="shape"> 
 
     <path transform="translate(0.000000,163.000000) scale(0.100000,-0.100000)" d="M373 1197 c-355 -355 -363 -363 -363 -402 0 -39 8 -47 363 -402 355 
 
-355 363 -363 402 -363 39 0 47 8 402 363 355 355 363 363 363 402 0 39 -8 47 
 
-363 402 -355 355 -363 363 -402 363 -39 0 -47 -8 -402 -363z" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 

 

 
<img class='photo_rectangle_inverse' src='http://i.imgur.com/NR6kefg.jpg' /> 
 

 
<img class='photo_rectangle_inverse' src='http://i.imgur.com/DXaH323.jpg' />

Я также хотел бы посмотреть на очистку пути SVG, кажется, способ слишком заполнен, учитывая простоту формы. Я сделал это сам и получаю почти такой же результат, но с гораздо меньшим количеством кода.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
.photo_rectangle_inverse { 
 
    height: 160px; 
 
    width: 170px; 
 
    -webkit-clip-path: url(#shape); 
 
    clip-path: url(#shape); 
 
    position: relative; 
 
    -webkit-transform: translateZ(1px) 
 
}

<svg width="0" height="0" viewBox="0 0 160 160"> 
 
    <defs> 
 
    <clipPath id="shape"> 
 
     <path d="M10,70 Q0,80 10,90 L70,150 Q80,160 90,150 L150,90 Q160,80 150,70 L90,10 Q80,0 70,10z" /> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 

 

 
<img class='photo_rectangle_inverse' src='http://i.imgur.com/NR6kefg.jpg' /> 
 

 
<img class='photo_rectangle_inverse' src='http://i.imgur.com/DXaH323.jpg' />