我的svg内容

最新推荐文章于 2022-12-20 20:06:34 发布

左之右

最新推荐文章于 2022-12-20 20:06:34 发布

阅读量324

点赞数

分类专栏：前端文章标签： js css

本文链接：https://blog.csdn.net/zuozhiyoulaisam/article/details/52993597

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!--//我们画svg，最重要的是它的路径问题，所以我们取刚刚的svg的路径-->

<!--//d="m86.5,248c0,0 44,-153 94,-113c50,40 71,207 124,123c53,-84 129,-95 129,-95"-->



<!--放完参数之后就要调对应的js与控制线的css内容



    以下的svg内容，说明一下：除了path 与  image  其他参数查网上资料，我没有的太多的了解[这些参数并不影响效果]
    重要的是：image path  还有d="m86.5,248c0,0 44,-153 94,-113c50,40 71,207 124,123c53,-84 129,-95 129,-95"


    说明：
    animateMotion标签的运动说明:
    begin="0s" dur="1"     开始到结束时间  单位为：1s
    由上的参数，说明动画运动1s，故我们的线也要1s
-->

<style>

    /*线的基本样式*/
    .st1{
        fill:none;
        stroke:#cf1e22;
        stroke-width:4;
        stroke-miterlimit:2000;
        stroke-dasharray: 2000;
        stroke-dashoffset:2000;
        opacity: .6;
    }
    /*//写完了js之后，就要写css了，就是我们的dash0样式
        看一下效果

        我们看到线是有问题，所以需要调下面的参数dash0


        时间轴太短了，效果很不明显
        把时间进行调长一些

        设置为3s

        /稍等一下我看一下代码先啊

    */

    @keyframes dash0 {
        0% {
            stroke-dashoffset:2000;
        }
        100% {
            stroke-dashoffset:1450;
        }
    }

</style>


<svg width="580" height="400" id="svg0" xmlns="http://www.w3.org/2000/svg" class="hide">
    <g>
        <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
        <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
            <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
        </g>
    </g>
    <!--路线的画法，把路径的参数放进去-->
    <path  class="st1" id="test0" class="test"  d="m86.5,248c0,0 44,-153 94,-113c50,40 71,207 124,123c53,-84 129,-95 129,-95" opacity="0.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
    <!---主要就是放移动的图片  把路径的参数放进去-->
    <image  width="100" height="100"  x="-50" y="-100"  xlink:href="meili.png" >
        <animateMotion path="m86.5,248c0,0 44,-153 94,-113c50,40 71,207 124,123c53,-84 129,-95 129,-95"  begin="0s" dur="3" repeatCount="1" fill="freeze"/>
    </image>
</svg>




<script src="jquery-2.1.3.js"></script>
<script>
    //给线的画动态的样式：时间记得同步哦，如上参数begin="0s" dur="1"  也就是1s
    var time=3;
    //我们的线就是path
    //<path  class="st1" id="test0" class="test"  d="m86.5,248c0,0 44,-153 94,-113c50,40 71,207 124,123c53,-84 129,-95 129,-95" opacity="0.5" stroke-width="1.5" stroke="#000" fill="#fff"/>
    $("#test0").css('animation', 'dash0 '+time+"s  linear both");
    //上面css里面的内容的意思，做动画的时候，时间time 还有画对应的线的类型  linear both[你想知道具体线多少类型，看svg的文档，网上有]
    //写完了js之后，就要写css了，就是我们的dash0样式
</script>

Test