如何在同一行上对齐两个svg蒙版图像

Question

我有一个svg蒙版，并且该蒙版在chrome中的任何图像上都能完美地工作，但它不允许我对齐两个图像。当我对齐两个图像并应用蒙版时，它只显示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

如何在同一行上显示和对齐这两个svg蒙版图像？ 感谢

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' />