1

Chromeには影響するがFirefoxには影響しないように見えるクリッピングの問題が発生しています。

Firefox：

動作中のFireFoxイメージ

クロム：

動作しないChromeイメージ

これは私の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で正しく機能させるために私が何をする必要があるか知っている人はいますか？

4

1 に答える 1

0

この投稿はあまりビューを取得していないので、別の角度から問題を攻撃することにし、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>
于 2013-03-13T16:09:28.297 に答える