SVG Path Clipping issue in Chrome

Question

I'm experience a clipping issue that seems to affect Chrome but not Firefox.

Firefox:

Chrome:

This is my SVG tag with the definitions:

<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">

    <g>
        <clipPath id="c3">
            <polygon points="64.405,221.5 1.207,111.5 64.405,1.5 190.802,1.5 254,111.5 190.802,221.5"/>
        </clipPath>
    </g>

    <defs>
        <g id="fullHex">
            <polyline points="64.405,221.5 1.207,111.5 64.405,1.5 190.802,1.5 254,111.5 190.802,221.5 64.405,221.5" style="fill:none; stroke:rgba(60,158,194,.9); stroke-width:10" />
        </g>
    </defs>
</svg>

This is my html for the hexagon containers:

<div id="hexImageContainer">

    <div id="ProfileImg1Container" class="ProfileImgContainer">
        <div id="ProfileImg1" class="imgHolder clip3">
            <svg width="100%" height="100%">
                <use xlink:href = "#fullHex"/>
            </svg>
        </div>
    </div>

    <div id="ProfileImg2Container" class="ProfileImgContainer">
        <div id="ProfileImg2" class="imgHolder clip3">
            <svg width="100%" height="100%">
                <use xlink:href = "#fullHex"/>
            </svg>
        </div>
    </div> 

    <div id="ProfileImg3Container" class="ProfileImgContainer">                       
        <div id="ProfileImg3" class="imgHolder clip3">
            <svg width="100%" height="100%">
                <use xlink:href = "#fullHex"/>
            </svg>
        </div>
    </div>

</div>

And my CSS:

.clip3
{ 
    clip-path: url(#c3); 
    -webkit-clip-path: url(#c3); 
}

#ProfileImg1Container
{
    left: 200px;
    top: 28px;
}

.ProfileImgContainer
{
    width: 256px;
    height: 222px;
    position: absolute;
}

#hexImageContainer 
{
    background: url("HexShadow.png") no-repeat 0 0 scroll;
    position:relative;
    display:block;
    width: 461px;
    height: 495px;
    top:-228px;
    left:-11px;
}

As you can see the hexagon images do not appear at all in Chrome. What's also noticeable is that the contents of the A, B, and C boxes isn't being displayed either.

Wow! So I just zoomed out in Chrome and this happened:

Does anyone know what I need to do to get this clipping effect to work properly in Chrome?

Answer 1

Well since this post is not getting many views, I decided to attack the problem from a different angle and saw a method for creating these shapes with CSS3 Rotations.

http://jsfiddle.net/kizu/bhGn4/

CSS

.hexagon 
{
    overflow: hidden;
    visibility: hidden;
    -webkit-transform: rotate(120deg);
       -moz-transform: rotate(120deg);
         -o-transform: rotate(120deg);
            transform: rotate(120deg);
    cursor: pointer;
}
.hexagon-in1 
{
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}
.hexagon-in2 
{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: 50%;
    background-image: url(http://placekitten.com/240/240);
    visibility: visible;
    -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
         -o-transform: rotate(-60deg);
            transform: rotate(-60deg);
}

HTML:

<div class="hexagon hexagon1">
    <div class="hexagon-in1">
        <div class="hexagon-in2">
        </div>
    </div>
</div>