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