使用 SVG 路径剪切的图像在 Chrome 中反转答案

【问题标题】：Images clipped using SVG paths are reversed in Chrome使用 SVG 路径剪切的图像在 Chrome 中反转
【发布时间】：2014-02-09 02:16:59
【问题描述】：

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

这就是我的意思-

火狐

Chrome/IE

 <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。我不知道从哪里开始尝试解决这个问题，这似乎是一个相当具体的问题。

【问题讨论】：

据我所知， div 不是有效的 SVG 元素。 SVG 图像元素是而不是。我很惊讶这完全有效。
另外需要指出的是，定义描边颜色和描边宽度对剪辑路径没有影响。只有路径定义（形状）很重要。
目前只有 Firefox 支持将 SVG 效果（如剪辑路径）应用于非 SVG 元素（如 HTML 图像）。如果您希望它在 chrome 上工作，请使用包装在 <svg> 元素中的 SVG 图像元素

标签： html css svg clipping

【解决方案1】：

按照 Michael Mullany 的建议，尝试将 img 更改为 image 并更改 div 标签。

http://www.w3schools.com/svg/svg_reference.asp 这是一个页面，可以帮助您了解可以/不可以使用的内容。

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

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

【讨论】：