Question

我使用CSS关键帧和SVG来动画我的公司徽标，这应该是一个相当简单的过程，但我一定错过了一些东西，因为你可以在下面的JS小提琴中看到它内部有一个薄的内部填充白线。我希望角色只是一条白线我已将填充设置为无，并且徽标所基于的字体被概述为一个单独的路径，因此不确定是什么原因造成的？

https://jsfiddle.net/nzz970aL/1/

标记

<div class="placeholder">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="35.6 317.2 863.3 110.8" enable-background="new 35.6 317.2 863.3 110.8" xml:space="preserve">
            <path class="logo" fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="4" d="M86.8 349.2c0-12.2-9.7-21.9-21.9-21.9s-22.3 9.9-22.3 21.9c0 12.2 10.7 18.8 22.1 22.1 15.1 4.3 27.5 12.2 27.5 27.5 0 15.1-12.2 27.7-27.5 27.7s-27.5-12.6-27.5-27.7c0.2-1.6 1.2-2.5 2.9-2.5 1.4 0 2.7 0.8 2.7 2.3 -0.2 12.2 9.7 22.3 21.9 22.3s21.9-10.1 21.9-22.1c0-12.2-10.5-19.2-21.9-21.9 -14.5-3.7-27.5-12.2-27.5-27.7 0-14.9 12.4-27.5 27.7-27.5s27.3 12.4 27.3 27.5c-0.2 1.9-1.4 2.7-2.7 2.7C87.7 351.9 86.8 350.9 86.8 349.2L86.8 349.2zM227.3 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.5-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L227.3 422.3zM281.7 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1s-2.7-1-2.7-2.7v-95H281.7zM361 325.2c0-1.7 1-2.7 2.7-2.7s2.7 1 2.7 2.7v57.2c0 20.7 17.4 38.2 38.2 38.2 21.1 0 38.2-17.2 38.2-38.2v-56.8c0-1.7 1-2.9 2.7-2.9 1.7 0 2.7 1 2.7 2.7v57.2c0 24-19.6 43.6-43.6 43.6S361 406.6 361 382.5L361 325.2 361 325.2zM490.3 322.7h35.5c19.8 0 35.3 15.7 35.3 35.3 0 17.6-12.6 32.2-29.3 34.9l27.9 28.1h-0.2c0.8 0.6 1.2 1.6 1.2 2.1 0 1.7-1 2.7-2.7 2.7 -1.2 0-1.6-0.2-2.1-1L524 393.2h-28.3v29.7c0 2.1-1 3.3-2.7 3.3s-2.7-1-2.7-2.7L490.3 322.7 490.3 322.7zM495.7 387.8h30c16.3 0 29.7-13.6 29.7-29.8s-13.4-29.8-29.7-29.8h-30L495.7 387.8 495.7 387.8zM701.7 422.3v0.8c0 1.7-1 2.7-2.7 2.7 -1.2 0-1.7-0.4-2.3-1.2l-46.3-91.9 -45 87.6h43.4c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-52.7l54.1-105.2L701.7 422.3zM756.2 328.1h-37.6c-1.7 0-2.5-1-2.5-2.7s1-2.7 2.7-2.7h77.9c1.7 0 2.7 1.2 2.7 2.7 0 1.7-1 2.7-2.7 2.7h-34.9v94.6c0 1.9-1 3.1-2.7 3.1 -1.7 0-2.7-1-2.7-2.7v-95H756.2zM840.9 376.1v44.2h53.7c1.7 0 2.9 1 2.9 2.7s-1 2.7-2.7 2.7h-59.5V322.7h59.1c1.9 0 3.1 1 3.1 2.7s-1 2.7-2.7 2.7h-53.9c0 7.4-0.2 14.1-0.2 21.3v21.1h8.7c2.1 0 3.1 1 3.1 2.7s-0.8 2.7-2.7 2.7h-8.9V376.1z"/>
        </svg>
    </div>

CSS

* {
            margin: 0;
            border: 0;
        }
        body {
            background: #000;
        }
        .placeholder {
            position: absolute;
            top: 50%;
            text-align: center;
            z-index: 99;
            width: 100%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
        }
        svg {
            max-width: 480px;
        }
        .logo {
            stroke-dasharray:1000;
            stroke-dashoffset: 1000;
            -webkit-animation: dash 2s linear forwards;
            animation: dash 2s linear forwards;
        }
        @keyframes dash {
          from {
            stroke-dashoffset: 1000;
          }
          to {
            stroke-dashoffset: 0;
          }
        }

使用SVG和CSS关键帧制作动画徽标

0 个答案: