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>