Transform Origin无法在Firefox中运行

时间：2013-01-16 23:10:06

标签： css firefox css3 css-transitions

我正在使用CSS Transitions和jQuery激活动画一个SVG组。动画还使用transform-origin: 50% 0%;保持div的中心。它在Chrome和Safari中完美运行，但在Firefox中，转换属性加载正常，但transform-origin无法正常工作。页面是实时的here，我在下面嵌入了相关代码。由于已知的Webkit错误，与SVG过滤器相关的代码已被注释掉。

CSS：

.chartsection {
    -webkit-transition: all .7s ease;
    -moz-transition:    all .7s ease;
    -o-transition:      all .7s ease;
    -ms-transition:     all .7s ease;
    transition:         all .7s ease;
    -webkit-transform-origin:   50% 0%;
    -moz-transform-origin:      50% 0%;
    -o-transform-origin:        50% 0%;
    -ms-transform-origin:       50% 0%;
    transform-origin:           50% 0%;
}

jQuery的：

function goToStud() {
$('#studchart').css({
    '-webkit-transform': 'scale(' + studScaleUp +')',
    '-moz-transform': 'scale(' + studScaleUp +')',
    '-o-transform': 'scale(' + studScaleUp +')',
    '-ms-transform': 'scale(' + studScaleUp +')',
    'transform': 'scale(' + studScaleUp +')'
})/*.attr("filter", "url(#noblur)")*/;

$('#guestchart').css({
    '-webkit-transform': 'scale(' + guestScaleDown +') translateY(' + guestMoveDown + 'px)',
    '-moz-transform': 'scale(' + guestScaleDown +') translateY(' + guestMoveDown + 'px)',
    '-o-transform': 'scale(' + guestScaleDown +') translateY(' + guestMoveDown + 'px)',
    '-ms-transform': 'scale(' + guestScaleDown +') translateY(' + guestMoveDown + 'px)',
    'transform': 'scale(' + guestScaleDown +') translateY(' + guestMoveDown + 'px)'
})/*.attr("filter", "url(#fullblur)")*/;

hideTitles(500);
}

SVG：

<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="690px" height="420px"
viewBox="0 43 690 420"
enable-background="new 0 43 690 420" xml:space="preserve">
<defs></defs>

<!--
<filter id="fullblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" />
</filter>

<filter id="halfblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>

<filter id="noblur" x="0" y="0">
<feGaussianBlur in="SourceGraphic" stdDeviation="0" />
</filter>
-->

<!-- BACKGROUND (hidden) -->
<rect y="43" display="none" fill="#D1DBBB" width="690" height="420"/>

<!-- STAGE -->
<ellipse fill="#CC3333" stroke="#000000" cx="339.5" cy="43" rx="169.5" ry="42.5"/>



<!-- SEATS -->
<g>

<!-- STUDENT SECTIONS -->
<g id="studhover">
    <g id="studchart" class="chartsection">
    <!-- <g filter="url(#halfblur)" id="studchart" class="chartsection"> -->

        <g id="s1">
    <path class="sFill" fill="#FECB2F" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
        c-2.761,0-5,2.239-5,5V136z"/>
    <path class="sStroke" fill="none" stroke="#000000" d="M90.75,136c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V90.5c0-2.761-2.239-5-5-5h-150
        c-2.761,0-5,2.239-5,5V136z"/>
</g>

        <g id="s2">
        <path class="sFill" fill="#FECB2F" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
    c-2.761,0-5,2.239-5,5V150z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M265.75,150c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
    c-2.761,0-5,2.239-5,5V150z"/>
    </g>

        <g id="s3">
        <path class="sFill" fill="#FECB2F" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150c-2.762,0-5,2.239-5,5V136z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M439.25,136c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V90.5c0-2.761-2.238-5-5-5h-150
        c-2.762,0-5,2.239-5,5V136z"/>
    </g>

        <g id="s4">
        <path class="sFill" fill="#FECB2F" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
        c-2.761,0-5,2.239-5,5V205.5z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M90.75,205.5c0,2.761,2.239,5,5,5h150c2.761,0,5-2.239,5-5V160c0-2.761-2.239-5-5-5h-150
        c-2.761,0-5,2.239-5,5V205.5z"/>
        </g>

        <g id="s5">
        <path class="sFill" fill="#FECB2F" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
    c-2.761,0-5,2.239-5,5V218z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M265.75,218c0,2.761,2.239,5,5,5h150c2.762,0,5-2.239,5-5v-45.5c0-2.761-2.238-5-5-5h-150
    c-2.761,0-5,2.239-5,5V218z"/>
    </g>

        <g id="s6">
        <path class="sFill" fill="#FECB2F" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
    c-2.762,0-5,2.239-5,5V205.5z"/>
        <path class="sStroke" fill="none" stroke="#000000" d="M439.25,205.5c0,2.761,2.238,5,5,5h150c2.762,0,5-2.239,5-5V160c0-2.761-2.238-5-5-5h-150
    c-2.762,0-5,2.239-5,5V205.5z"/>
    </g>

    </g>

    <!-- Filling in the gaps -->
    <g>
        <rect x="251" y="84" fill="transparent" width="15" height="140" id="sVertLine1" />
        <rect x="425" y="84" fill="transparent" width="15" height="140" id="sVertLine2" />

        <rect x="266" y="84" fill="transparent" width="159" height="15" id="sHorizLine1" />
        <rect x="90" y="140" fill="transparent" width="161" height="15" id="sHorizLine2a" />
        <rect x="440" y="140" fill="transparent" width="161" height="15" id="sHorizLine2b" />
        <rect x="266" y="153" fill="transparent" width="161" height="15" id="sHorizLine3" />
        <rect x="90" y="210" fill="transparent" width="161" height="12" id="sHorizLine4a" />
        <rect x="440" y="210" fill="transparent" width="161" height="12" id="sHorizLine4b" />
    </g>

</g>

<!-- GUEST SECTIONS -->
<g id="guesthover">
    <g id="guestchart" class="chartsection">
    <!--<g filter="url(#halfblur)" id="guestchart" class="chartsection">-->
        <g>
    <path class="gFill" fill="#3333CC" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
        c-2.761,0-5,2.239-5,5V273z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M91.5,273c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5v-45.5c0-2.761-2.239-5-5-5h-150
        c-2.761,0-5,2.239-5,5V273z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445c-2.762,0-5,2.239-5,5
        V273z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M440,273c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5H445
        c-2.762,0-5,2.239-5,5V273z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
        c-2.761,0-5,2.238-5,5V342.5z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M91.5,342.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V297c0-2.762-2.239-5-5-5h-150
        c-2.761,0-5,2.238-5,5V342.5z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
        V342.5z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M440,342.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V297c0-2.762-2.238-5-5-5H445
        c-2.762,0-5,2.238-5,5V342.5z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V287z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M266.5,287c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.761-2.238-5-5-5h-150
        c-2.761,0-5,2.239-5,5V287z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
        c-2.761,0-5,2.238-5,5V355z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M266.5,355c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
        c-2.761,0-5,2.238-5,5V355z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
        c-2.761,0-5,2.238-5,5V410.5z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M91.5,410.5c0,2.762,2.239,5,5,5h150c2.761,0,5-2.238,5-5V365c0-2.762-2.239-5-5-5h-150
        c-2.761,0-5,2.238-5,5V410.5z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445c-2.762,0-5,2.238-5,5
        V410.5z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M440,410.5c0,2.762,2.238,5,5,5h150c2.762,0,5-2.238,5-5V365c0-2.762-2.238-5-5-5H445
        c-2.762,0-5,2.238-5,5V410.5z"/>
</g>
        <g>
    <path class="gFill" fill="#3333CC" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
        c-2.761,0-5,2.238-5,5V423z"/>
    <path class="gStroke" fill="none" stroke="#000000" d="M266.5,423c0,2.762,2.239,5,5,5h150c2.762,0,5-2.238,5-5v-45.5c0-2.762-2.238-5-5-5h-150
        c-2.761,0-5,2.238-5,5V423z"/>
</g>
    </g>

    <!-- Filling in the gaps -->
    <g>
        <rect x="251" y="224" fill="transparent" width="15" height="206" id="gVertLine1" />
        <rect x="425" y="224" fill="transparent" width="15" height="206" id="gVertLine2" />

        <rect x="266" y="222" fill="transparent" width="159" height="15" id="gHorizLine1" />
        <rect x="90" y="278" fill="transparent" width="161" height="15" id="gHorizLine2a" />
        <rect x="440" y="278" fill="transparent" width="161" height="15" id="gHorizLine2b" />
        <rect x="266" y="291" fill="transparent" width="161" height="15" id="gHorizLine3" />
        <rect x="90" y="348" fill="transparent" width="161" height="15" id="gHorizLine4a" />
        <rect x="440" y="348" fill="transparent" width="161" height="15" id="gHorizLine4b" />
        <rect x="266" y="360" fill="transparent" width="161" height="15" id="gHorizLine5" />
        <rect x="90" y="417" fill="transparent" width="161" height="13" id="gHorizLine4a" />
        <rect x="440" y="417" fill="transparent" width="161" height="13" id="gHorizLine4b" />
    </g>

</g>

0 个答案:

没有答案
相关问题
最新问题