首页 > SVG在PC浏览器描边动画正常,在手机浏览器没动画.?

SVG在PC浏览器描边动画正常,在手机浏览器没动画.?

其中文字是SVG图像,通过设置stroke-array和stroke-offset达到描边的动画效果,但是只能在PC浏览器看到。用手机浏览器可以尝试打开,看到的只是静态的svg图像。
问题1:原因是什么?是手机端浏览器暂时不支持svg吗?
问题2:如何解决?

主要代码:
css3

<style>
     @keyframes dash {
      from {
        stroke-dashoffset: 2000;
        opacity: 1;
      }
      to {
        stroke-dashoffset: 0;
      }
    }
      #svg-logo{
           position: absolute;
           left: 50%;
           margin-left: -150px;
         stroke-dasharray: 2000;
         animation:dash 6s forwards linear;
    </style>

svg图形

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" id="svg-logo"
         height="300px" viewBox="0 0 640 640" enable-background="new 0 0 640 640" xml:space="preserve">
<g id="c1" display="none">
    
        <rect x="-40.006" y="19.751" display="inline" fill="#32B6A0" stroke="#000000" stroke-miterlimit="10" width="802.174" height="670.652"/>
    </g>
    <g id="c2">
        <g>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M73.978,360.663
                c11.355-23.595,22.819-38.052,36.424-46.388c-3.108-4.18-6.058-8.408-8.913-12.667c-2.843,0.761-5.606,1.64-8.295,2.648
                C87.87,323.21,81.286,341.897,73.978,360.663z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M79,239v4.346
                c38.21,1.552,40.703,6.828,40.703,31.036v108.005c0,14.313-0.54,26.397-1.721,36.663c-0.572,14.814-0.666,29.399,0.164,43.869
                c15.346-12.906,23.153-32.499,23.153-68.428v-120.11c0-24.207,3.323-29.484,37.38-31.036V239H79z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M169.288,260.963
                c2.288,7.724,1.22,14.724-1.898,22.763l3.431,1.597c3.207-9.086,5.418-16.96,5.383-24.743
                C173.897,260.653,171.591,260.771,169.288,260.963z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M269.168,353.425
                c-16.927,17.525-36.435,22.421-43.034,22.421c-33.853,0-54.796-24.225-54.796-51.543c0-37.886,34.427-61.337,57.665-61.337
                c24.672,0,42.459,18.04,42.459,36.338c0,5.154-0.287,5.928-4.877,6.7c-4.591,0.774-41.312,3.609-80.903,4.639
                c-0.287,39.175,25.82,53.091,45.615,53.091c9.754,0,20.082-1.804,34.714-14.175L269.168,353.425z M187.404,302.397
                c6.599,0,47.05-0.515,59.386-0.774c7.172,0,7.172-2.576,7.172-4.123c0-14.433-12.049-27.319-32.705-27.319
                C206.912,270.181,191.707,281.522,187.404,302.397z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M286.476,389.625
                c13.771-0.903,16.028-4.064,16.028-18.286V327.09c0-16.48-1.58-17.835-15.577-19.415v-2.709
                c9.256-1.806,18.286-4.515,26.413-9.481v27.542h0.452c5.418-12.19,17.608-26.639,28.67-26.639c6.773,0,11.063,5.869,11.063,9.481
                c0,4.289-4.516,8.353-7.901,8.353c-0.903,0-1.58-0.226-2.032-1.129c-3.386-3.16-5.192-4.74-9.481-4.74
                c-6.096,0-14.899,10.158-20.769,26.639v36.798c0,13.997,2.032,16.932,20.091,17.835v3.16h-46.956V389.625z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M360.699,390.44
                c13.771-0.903,16.029-4.064,16.029-18.286v-44.249c0-16.48-1.58-17.835-15.577-19.415v-2.709
                c9.256-1.806,18.286-4.515,26.413-9.481v27.542h0.451c5.418-12.19,17.609-26.639,28.671-26.639c6.772,0,11.063,5.869,11.063,9.481
                c0,4.289-4.516,8.353-7.901,8.353c-0.903,0-1.581-0.226-2.032-1.129c-3.387-3.16-5.192-4.74-9.481-4.74
                c-6.096,0-14.9,10.158-20.77,26.639v36.798c0,13.997,2.031,16.932,20.092,17.835v3.16h-46.957V390.44z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M429.709,279.449h61.604v4.582
                c-11.782,2.29-17.505,4.254-17.505,10.8c0,1.963,0.674,4.908,2.356,8.181l36.357,87.048c5.05-10.146,37.703-77.231,37.703-93.594
                c0-8.508-5.723-10.471-19.525-12.435v-4.582h62.951v4.582c-18.851,2.29-20.198,6.217-30.633,23.561
                c-10.099,16.69-22.219,43.525-50.16,99.484c-24.574,49.086-33.663,67.739-38.376,85.083c-1.683,4.909-5.387,6.546-9.763,6.546
                c-8.081,0-15.149-6.546-15.149-13.417c0-4.582,3.703-6.873,8.416-10.146c24.575-16.361,41.406-59.558,41.406-63.158
                c0-3.927-19.861-57.922-39.05-103.083c-7.405-16.69-9.763-21.598-30.633-24.871V279.449z"/>
            <path fill="none" stroke="#FFFFFF" stroke-width="3" stroke-miterlimit="10" d="M146.057,217.957
                c0,8.404-6.813,15.217-15.217,15.217l0,0c-8.404,0-15.217-6.813-15.217-15.217l0,0c0-8.404,6.813-15.217,15.217-15.217l0,0
                C139.244,202.739,146.057,209.552,146.057,217.957L146.057,217.957z"/>
        </g>
    </g>
    </svg>

我也碰到了 手机上没效果 路径短点就有效果了。。。。
animation:dash 6s forwards linear;改成 -webkit-animation:dash 6s forwards linear; 就可以 就是感觉很卡 效果不怎么好 电脑上非常快 手机上估计差点的手机 都动不了


浏览器问题吧?我这是好的

【热门文章】
【热门文章】