Как заставить работать clip-path в Firefox

252

29 апреля 2017, 21:00

Здравствуйте как заставить работать clip-path в Firefox ?

Answer 1

Чтобы заставить clip-path работать в Firefox, необходимо указывать значения точек в полигоне или в патче не в процентах, а в пикселях или дробными цифрами не более "1.0" то есть от "0.01" до "1.0"
При выборе последнего (дробного) варианта, необходимо указывать режим clipPathUnits="objectBoundingBox">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400" > 
 
  <defs> 
    <clipPath id="clip-ff" clipPathUnits="objectBoundingBox"> 
      <polygon points="0.2, 0.1 0.7,0.2 1,1 0,1.8"></polygon> 
    </clipPath> 
  </defs> 
  <image xlink:href="http://placeimg.com/300/400/any" clip-path="url(#clip-ff)" width="400" height="400"> </image> 
</svg>

Работает в IE11, FF, Chrome, Opera