html - Svg 剪辑路径在 Firefox、IE 和 Opera 中不起作用

Question

我已按照这些说明制作剪裁形状 http://www.guestandguest.com/blog/posts/crop-your-images-in-css-instead-of-using-svg

这是我的代码

CSS

div#offer {
overflow:hidden;  
width:2028px;  
height:985px;  
margin-top:-765px;  
position:relative;  
/*Chrome,Safari*/  
-webkit-clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px);  
-ms-clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px);  
/*Firefox*/  
clip-path: polygon(2028px 830px,0px 985px,0px 0px,2028px 0px);  
clip-path: url('#clipoffer');  

/* iOS support inline encoded svg file*/  
-webkit-mask: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIwIiBoZWlnaHQ9IjAiPgogIDxjbGlwUGF0aCBpZD0ic3ZnQ2xpcCI+CiAgICA8cGF0aCBpZD0ic3ZnUGF0aCIgZD0iTTIwMjgsODMwIEwwLDk4NSAwLDAgMjAyOCwwIHoiLz4KICA8L2NsaXBQYXRoPgogIDxwYXRoIGlkPSJzdmdNYXNrIiBkPSJNMjAyOCw4MzAgTDAsOTg1IDAsMCAyMDI4LDAgeiIgIC8+Cjwvc3ZnPg==) no-repeat;  }

和 HTML

 <div id="offer">
            <svg width="0" height="0">
              <clipPath id="clipoffer">
                <polygon points="2028px 830px,0px 985px,0px 0px,2028px 0px">
                </polygon>
              </clipPath>
            </svg>

            <div class="bg">

            </div>

        </div> <!-- end of div id="offer" -->

根据我遵循的说明，它应该可以完美运行，但事实并非如此。效果可见这里http://samandera.com/ .它适用于 Chrome，因此您也可以进行适当的预览。

感谢您的各种帮助。

Answer 1

点属性值只能是数字。拥有 px 是非法的。您引用的示例没有它们。

您在 UA 的错误日志中没有看到这方面的错误吗？

/*Firefox*/
clip-path: polygon(2028 830,0 985,0 0,2028 0);
-moz-clip-path: url('#clipoffer');

没有 -moz-clip-path 这样的东西。对于你想要的非 webkit

clip-path: url('http://samandera.com/#clipoffer');