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>