Chrome中的SVG路径剪辑问题

Question

我遇到的剪辑问题似乎影响Chrome但不影响Firefox。

火狐：

铬：

这是我的SVG标记，其定义为：

<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>

这是我对六角形容器的html：

<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>

我的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;
}

正如您所见，Chrome中根本没有出现六角形图像。同样值得注意的是，A，B和C框的内容也没有显示出来。

哇！所以我只是在Chrome中缩小了这一点：

有没有人知道我需要做些什么才能让这种剪辑效果在Chrome中正常运行？

Answer 1

好了，因为这篇文章没有得到很多观点，我决定从不同角度解决问题，并看到了一种用CSS3旋转创建这些形状的方法。

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>