文章/答案/技术大牛

发布

社区首页 >问答首页 >动画svg笔画未完成

问动画svg笔画未完成
EN

Stack Overflow用户

提问于 2015-08-01 00:04:03

回答 1查看 838关注 0票数 1

我有一个小问题，与我的标志在svg的斯托克动画。我有一个动画与:笔画-dashoffset适当的CSS。

但是在悬停上的标志并没有完全完成所有的动画。该标志被认为是一个动画，以建立自己与线。动画工作，但不完全。

检查一下我的小提琴曲，看看代码的问题。https://jsfiddle.net/ytkL4b5d/的HTML

<div id="logo">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 733.9 500" style="enable-background:new 0 0 733.9 500;" xml:space="preserve">
                    <polygon class="logo" id="XMLID_56_" points="193.7,39.2 193.7,454.2 228.4,454.2 228.4,454.2 469,454.2 469,419.5 228.4,419.5 228.4,131.2 
                        366.9,288.8 505.2,129.9 505.2,454.2 539.9,454.2 539.9,37.2 366.7,236.1  "/>
                    <path class="logo" id="XMLID_101_" d="M47.3,85.2c0,16.8,2.4,33,4.8,49.8c2.4,16.8,4.8,33.6,4.8,50.4c0,21-6,44.4-48.6,44.4v30.6
                        c42.6,0,48.6,25.8,48.6,44.4c0,16.2-2.4,32.4-4.8,48.6c-2.4,16.2-4.8,33-4.8,49.2c0,60.6,37.2,82.2,87,82.2h12.6v-33h-10.8
                        c-33.6,0-47.4-18.6-47.4-52.2c0-14.4,1.8-28.2,4.2-43.2c2.4-14.4,4.2-29.4,4.2-45.6c0.6-38.4-16.2-58.8-43.2-65.4v-1.2
                        c27-7.2,43.8-26.4,43.2-64.8c0-16.2-1.8-30.6-4.2-45.6c-2.4-14.4-4.2-28.8-4.2-42.6c0-32.4,12-51.6,47.4-51.6h10.8v-33h-12.6
                        C83.3,6.6,47.3,30,47.3,85.2z"/>
                    <path class="logo" id="XMLID_102_" d="M675.5,185.4c0-16.8,2.4-33.6,4.8-50.4c2.4-16.8,4.8-33,4.8-49.8c0-55.2-36.6-78.6-87.6-78.6h-12v33h10.8
                        c34.8,0.6,47.4,19.2,47.4,51.6c0,13.8-2.4,28.2-4.2,42.6c-2.4,15-4.8,29.4-4.8,45.6c0,38.4,16.8,57.6,43.2,64.8v1.2
                        c-26.4,6.6-43.2,27-43.2,65.4c0,16.2,2.4,31.2,4.8,45.6c1.8,15,4.2,28.8,4.2,43.2c0,33.6-14.4,51.6-48,52.2h-10.2v33h12.6
                        c49.2,0,87-21.6,87-82.2c0-16.2-2.4-33-4.8-49.2c-2.4-16.2-4.8-32.4-4.8-48.6c0-18.6,6-44.4,48.6-44.4v-30.6
                        C681.5,229.8,675.5,206.4,675.5,185.4z"/>
                </svg>
</div>

CSS (scss)：

#logo{
    width:120px;
    height:auto;
    float:left;
    margin-left:20px;
    margin-top:0px;
.logo{
        width: 120px;
        height: auto;
        padding: 5px;
        fill: #000;
        animation: dashreverse 5s ease;
        -webkit-transition: all 400ms ease-in-out;
        -moz-transition: all 400ms ease-in-out;
        -ms-transition: all 400ms ease-in-out;
        -o-transition: all 400ms ease-in-out;
        transition: all 400ms ease-in-out;
    }
    &:hover{
        .logo{
            fill: transparent;
            stroke: #000;
            stroke-width: 4px;
            stroke-linecap: round;
            stroke-linejoin: round;
            stroke-dasharray: 1000;
            stroke-dashoffset: 0;
            transition: .2s;
            animation: dash 4s ease;
        }
    }
}
@keyframes dash {
  from {
    stroke-dashoffset: 1000;
  }
  to {
    stroke-dashoffset: 0;
  }
}

**我认为问题可能在于我的svg是如何制作的。我使用Illustrator来制作它并生成一个svg。

html

animation

svg

css-animations

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-08-01 00:50:57

问题是你的dasharray长度是1000。要使动画正确工作，所使用的长度必须与元素的路径长度相匹配。

元素的路径长度远远大于1000。"M“的长度为2977，而yhe两个括号的长度为1277和1276。

如果您将dasharray设置为这三个长度中最长的dashoffset，则动画将完成。

.logo{
   ...
   stroke-dasharray: 2977;
   ...
}

和

@keyframes dash {
  from {
    stroke-dashoffset: 2977;
  }
  to {
    stroke-dashoffset: 0;
  }
}

https://jsfiddle.net/ytkL4b5d/1/

然而，这意味着括号较短，比"M“的结尾要快得多。如果你不喜欢，你可以有两个动画。M长一个，括号1277短一个。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31756893

复制

相似问题

问动画svg笔画未完成
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画svg笔画未完成EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动画svg笔画未完成
EN