Clip-path не работает с хромом

Вопрос:У меня проблема с clip-path в Chrome. Firefox не имеет проблем и показывает эту страницу html правильно, но хром ничего не показывает. img { -webkit-clip-path: url(#clipping); clip-path: url(#clipping); } Лучший ответ: Webkit не поддерживает применение SVG clipPath к

Вопрос:

У меня проблема с clip-path в Chrome. Firefox не имеет проблем и показывает эту страницу html правильно, но хром ничего не показывает.

img { -webkit-clip-path: url(#clipping); clip-path: url(#clipping); }<svg> <defs> <clipPath id=»clipping»> <circle cx=»284″ cy=»213″ r=»213″ /> </clipPath> </defs> </svg> <img src=»http://i.stack.imgur.com/MnWjF.png» width=»728″ height=»482″ >Лучший ответ:

Webkit не поддерживает применение SVG clipPath к html-изображению. Если вы сделаете изображение SVG-изображением, то есть измените тег на <image> и поместите его внутри элемента <svg>, тогда он будет работать.

Firefox делает поддержку применения SVG clipPath к HTML-образу, поэтому он работает там.

Вот пример любезности Панчо.

<svg width=»245″ height=»180″ viewBox=»0 0 245 180″ > <image xmlns:xlink=»http://www.w3.org/1999/xlink» xlink:href=»something.jpg» width=»245″ height=»180″ class=»MyClipping» ></image> </svg>

Оцените статью
Добавить комментарий