出于某种原因,在SVG上方划线

时间:2017-02-12 16:27:35

标签: html css svg

我制作了一个SVG,现在它有几个直线移动的块。

有时当块移动时它只会在它们上方添加一个笔划,尽管我禁用了笔划。 注意:如果您仔细观察,可以看到块上方的橙色笔划

here看起来像什么。

    @keyframes move {
    0% {

        transform: translate3d(250px , 0px , 0px);
    }
    50% {
        transform: translate3d(-200px , 0px , 0px);
    }
    100% {
        transform: translate3d(250px , 0px , 0px);
    }
}
#loading_bar .cls-2 {
    stroke: none;

    transition: transform 2s ease-in-out;
    animation: move 4s infinite forwards;
}
<svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080">
    <defs>
        <style>
            .cls-1{fill:#64b2c1;}
            .cls-2{fill:orange;}
            .cls-3{fill:transparent;stroke-miterlimit:10;}
            .cls-4{fill:#191919;}
        </style>
    </defs>

    <g id="background">

    <rect class="cls-1" width="1920" height="1080"/>

    <rect class="cls-2" x="871" y="769" width="90" height="84"/>
    </g>
    <g id="loading_bar">
        <rect class="cls-4" x="545" y="769" width="792" height="84"/>

        <rect class="cls-2" x="789" y="789" width="40" height="40"/>
        <rect class="cls-2" x="988" y="789" width="40" height="40"/>
        <rect class="cls-2" x="888" y="789" width="40" height="40"/></g></svg>

0 个答案:

没有答案