我遇到了一个似乎影响 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 中正常工作?