Question

我遇到了应用于图像的SVG剪贴蒙版的问题。这在Firefox中可以正常工作，但在Chrome和IE中，剪贴蒙版反向运行（还没有机会尝试其他浏览器）。

这就是我的意思 -

火狐

enter image description here

铬/ IE

enter image description here

 <svg height="0" width="0" >
<defs>
    <clipPath id="clipPath" stroke="white" stroke-width="10">
        <path d="M252.294,0.26l-203.586,0c0,0-47.43,1.586-48.207,38.876c0.777,37.29,48.207,38.877,48.207,38.877h203.586
        c0,0,47.43-1.587,48.207-38.877C299.724,1.847,252.294,0.26,252.294,0.26z"/>
    </clipPath>
</defs>

<div id='board_img_1' class='board_imgs'>
    <img src="./images/board1.png" style="  clip-path: url(#clipPath); 
                                            width: 100%; 
                                            height: 100%;"></div>

<div id='board_img_2' class='board_imgs'>
    <img src="./images/board2.png" style="  clip-path: url(#clipPath); 
                                            width: 100%; 
                                            height: 100%;"></div>

</svg>

这是我的HTML。我不知道从哪里开始，甚至试图解决这个问题，这似乎是一个相当具体的问题。

Answer 1

正如Michael Mullany建议的那样，尝试将img更改为图像并更改div标签。

http://www.w3schools.com/svg/svg_reference.asp 这是一个可能有助于您可以/不可以使用的页面。

这里还有一些如何使用SVG的例子： http://www.w3schools.com/svg/svg_examples.asp

最后，请查看此链接以获取SVG的浏览器支持及其各种用途： http://caniuse.com/#cats=SVG

使用SVG路径剪切的图像在Chrome中是相反的

1 个答案: