Question

最近，我在一个SVG徽标上制作了一个绘图动画，该网站可以在Google Chrome，Safari和IE上完美运行。虽然由于某种原因，绘图动画会跳过一个角落并直接在Firefox上结束

铬：

火狐：

正如你在chrome上看到的那样，动画效果很好但在Firefox上动画会跳过中间矩形的右上角。

SVG：

       <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-303 148 234.6 299.3" style="enable-background:new -303 148 234.6 299.3;" xml:space="preserve">

            <g id="De_Rotterdam">

                <path class="letter" d="M-295.7,441.6c2.8,0,4.2-1,4.2-3.4 v-44.9c0-2.4-1.4-3.4-4.2-3.4h-3.2v51.8H-295.7z M-302,387.5h6.6c4.6,0,7,1.8,7,6v44.4c0,4.2-2.4,6-7,6h-6.6V387.5z"/>

                <polygon class="letter" points="-279.8,387.5 -279.8,443.9 -268.5,443.9 -268.5,441.6 -276.7,441.6 -276.7,416.1 -269.5,416.1 -269.5,413.7-276.7,413.7 -276.7,389.8 -269.1,389.8 -269.1,387.5"/>

                <path class="letter" d="M-243.3,413.7c2.7,0,4.1-1.3,4.1-3.8v-16.7c0-2.4-1.3-3.5-3.8-3.5h-3.4v23.9H-243.3z M-249.5,387.5h7c3.8,0,6.4,1.7,6.4,5.2v16.7c0,3.1-0.9,5.2-4.8,5.6v0.2c2.8,0.2,4.8,1.6,4.8,5.1v23.8h-3.1v-23.8c0-2.1-1.2-4.1-4.3-4.1h-2.9v27.9h-3.1V387.5z"/>
                <path class="letter" d="M-216.7,393.3c0-2.5-1.4-3.8-3.7-3.8c-2.3,0-3.8,1.3-3.8,3.8v44.8c0,2.5,1.5,3.8,3.8,3.8c2.3,0,3.7-1.3,3.7-3.8V393.3zM-213.6,438.2c0,3.9-2.4,6.1-6.8,6.1c-4.4,0-6.9-2.2-6.9-6.1v-44.9c0-3.9,2.5-6.1,6.9-6.1c4.4,0,6.8,2.2,6.8,6.1V438.2z"/>

                <polygon class="letter" points="-208.2,387.5 -208.2,389.8 -202.6,389.8 -202.6,443.9 -199.5,443.9 -199.5,389.8 -194,389.8 -194,387.5"/>
                <polygon class="letter" points="-191.7,387.5 -191.7,389.8 -186.1,389.8 -186.1,443.9 -183,443.9 -183,389.8 -177.4,389.8 -177.4,387.5"/>
                <polygon class="letter" points="-172,387.5 -172,443.9 -160.8,443.9 -160.8,441.6 -168.9,441.6 -168.9,416.1 -161.8,416.1 -161.8,413.7-168.9,413.7 -168.9,389.8 -161.3,389.8 -161.3,387.5"/>

                <path class="letter" d="M-148,413.7c2.7,0,4.1-1.3,4.1-3.8v-16.7c0-2.4-1.3-3.5-3.8-3.5h-3.4v23.9H-148z M-154.2,387.5h7c3.8,0,6.4,1.7,6.4,5.2v16.7c0,3.1-0.9,5.2-4.9,5.6v0.2c2.8,0.2,4.9,1.6,4.9,5.1v23.8h-3.1v-23.8c0-2.1-1.2-4.1-4.3-4.1h-2.9v27.9h-3.1V387.5z"/>
                <path class="letter" d="M-125.7,441.6c2.8,0,4.2-1,4.2-3.4v-44.9c0-2.4-1.4-3.4-4.2-3.4h-3.2v51.8H-125.7z M-132,387.5h6.6c4.6,0,7,1.8,7,6v44.4 c0,4.2-2.4,6-7,6h-6.6V387.5z"/>
                <path class="letter" d="M-100.9,425.1l-2-18.5c-0.6-5.6-1.4-11.3-1.6-17.1h-0.2c-0.6,5.6-0.9,11.4-1.5,17.1l-2,18.5H-100.9z M-100.7,427.4h-7.7l-1.7,16.5h-2.8l6.3-56.5h4.4l6.5,56.5h-3.1L-100.7,427.4z"/>
                <path class="letter" d="M-90.2,387.5h5.2l3.4,34c0.6,5.9,1.2,13.2,1.4,20.1h0.2c0.4-6.8,0.9-14.3,1.5-20.1l3.6-34h5.2v56.5h-3.1v-35c0-3.7,0.2-12,0.3-19.1h-0.2c-0.7,7.4-1.6,16.4-2.2,22.4l-3.1,31.8H-82l-3.2-31.5c-0.5-4.9-1.7-16.2-2-22.7h-0.2c-0.1,7.4,0.3,15.6,0.3,19.1v35h-3.1V387.5z"/>
            </g>

            <g id="Builds">

                <polygon class="st0" points="-134.9,149.2 -134.9,261.1 -148.6,261.1 -148.6,376 -84.9,376 -84.9,261.1 -69.6,261.1 -69.6,149.2"/>
                <polygon class="st0" points="-218.1,149.2 -218.1,261.1 -225.1,261.1 -225.1,376.1 -161.4,376.1 -161.4,261.1 -155.2,261.1-155.2,149.2"/>
                <rect x="-301.8" y="149.2" class="st0" width="63.8" height="226.9"/>
            </g>

        </svg>

CSS（SASS）：

svg {
  width: 100%;

  .st0 {
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }
  .letter {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
  }

  .animatedLogo {
    animation: pathanimation 4s linear forwards;
  }
  .animatedLogoLetter {
    animation: letterpathanimation 4s linear forwards;
  }

}
@keyframes pathanimation {
    to {
        stroke-dashoffset: 0;
    }
}

我根本不知道为什么会发生这种情况，我无法发现我的代码有任何问题，但由于某些原因它在Firefox上运行不正常。

Answer 1

中间多边形的点属性缺少最后两个坐标对之间的空白区域。因此，不使用最后一个坐标对。

更改...

<polygon class="st0" points="-218.1,149.2 -218.1,261.1 -225.1,261.1 -225.1,376.1 -161.4,376.1 -161.4,261.1 -155.2,261.1-155.2,149.2"/>

为...

<polygon class="st0" points="-218.1,149.2 -218.1,261.1 -225.1,261.1 -225.1,376.1 -161.4,376.1 -161.4,261.1 -155.2,261.1 -155.2,149.2"/>

标准（https://www.w3.org/TR/SVG/shapes.html#PolygonElement）需要坐标对之间的逗号或空格。当坐标对的第一个坐标为负时，IE和Chrome似乎忽略了这个要求。

SVG绘图动画在Firefox中无法正常工作

1 个答案: