Путь клипа из svg на нескольких изображениях не работает в Safari

Я просмотрел this question, чтобы выяснить, как обрезать несколько блоков с помощью SVG-клипа в Safari. В комментариях было указано, что было указано: -webkit-transform:translateZ(1) - элемент, который требует обрезки. Однако я не умею делать обрезку, если у меня есть изображения вместо обычных блоков div. Я наметил новый код, отловленный на основе оригинала от связанный с этим вопрос.Путь клипа из svg на нескольких изображениях не работает в Safari

Если вы попытаетесь запустить фрагмент в Chrome, а затем в Safari, вы обнаружите, что в Safari отображается только один котенок, но два в Chrome. Я хотел бы сделать Safari клипом изображения Точно так же Chrome делает. Я не заинтересован в решениях, опирающиеся на использование background-image:url(some.url.png), если что-то подобное существует. Любая помощь или предложения приветствуются.

img{ 
 
    position:relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    clip-path: url(#clipping); 
 
    -webkit-clip-path: url(#clipping); 
 
    -webkit-transform:translateZ(1); 
 
}

<svg style="background: blue; height: 0px; overflow: hidden;"> 
 
    <defs> 
 
    <clipPath id="clipping" clipPathUnits="objectBoundingBox"> 
 
<path fill="#FFFFFF" d="M0.501,0.971c-0.014,0-0.027-0.003-0.04-0.011l-0.34-0.194c-0.024-0.014-0.04-0.041-0.04-0.069L0.081,0.306 
 
\t c0-0.028,0.015-0.055,0.04-0.069L0.458,0.04c0.013-0.007,0.026-0.011,0.04-0.011s0.027,0.003,0.04,0.011l0.339,0.194 
 
\t c0.025,0.014,0.041,0.041,0.041,0.069l0.001,0.391c0,0.028-0.015,0.055-0.04,0.069L0.542,0.96C0.529,0.968,0.515,0.971,0.501,0.971z 
 
\t "/> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<div style="background-color:green; height:100px;"> 
 
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/200/140.jpg"> 
 
</div> 
 

 
<div style="background-color:blue; height:100px;"> 
 
    <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg"> 
 
</div>

https://codepen.io/Johnonym/pen/jyjzgQ

источник

2017-02-20 John

Что касается множественных проблем совместимости, я бы посоветовал не использовать 'clip-path'. http://caniuse.com/#search=clip-path –

Спасибо за вашу ссылку. Вы случайно знаете альтернативный способ сделать это? Я только делаю квадрат с закругленными углами в качестве отсечения для моего проекта. Я думал об обтекании изображений в контейнере div, установив переполнение в скрытое и попытался преобразовать изображение вокруг, чтобы отобразить только определенную его часть. Однако я не пробовал. – John

Я попробовал другой подход, как тот, который упоминается в моем комментарии выше, и теперь он работает. – John

Попробуйте -webkit-transform: translateZ(0); для родительского DIV в IMG.

-webkit-transform:translateZ(1) Не работал и я.

источник

2017-04-20 15:48:31 Arelav

Путь клипа из svg на нескольких изображениях не работает в Safari

ответ

Смежные вопросы