Images clipped using SVG paths are reversed in Chrome

Question

I am having issues with an SVG clipping mask that's applied to an image. This works correctly in Firefox, but in Chrome and IE the clipping mask works in reverse (not had a chance to try other browsers yet).

Here's what I mean-

Firefox

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>

Here's my HTML. I'm not sure where to begin even trying to fix this and it seems like a fairly specific issue.

Answer 1

As Michael Mullany suggested, try changing img to image and changing your div tags.

http://www.w3schools.com/svg/svg_reference.asp Here is a page that might help with regards to what you can/can not use.

There is also some examples of how to use SVG here: http://www.w3schools.com/svg/svg_examples.asp

Lastly, check out this link for browser support for SVG and its various uses: http://caniuse.com/#cats=SVG