Вопрос:
У меня проблема с 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>