SVG.path_不连续的线段

1、之前 用<path/>画的 线段等 都是连续的,想知道 是否能画 不连续的线段等

  结论:可以

2、测试代码:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="1000" height="800" viewBox="0 0 1000 800" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:cge="http://iec.ch/TC57/2005/SVG-schema#" xmlns:hzsvg="http://holleygrid.cn/svg">

    <style type="text/css">
    <![CDATA[
    <!--
        path
        {
            stroke:black;
            stroke-width:20px;
            fill:none;

        stroke-dasharray: 5;
        stroke-dashoffset: 10;
        /*-webkit-animation: dash01 1s linear infinite;*//*把这里的注释去掉,就是 变化的动态变化(动画)*/
        }
    @-webkit-keyframes dash01
    {
      to
      {
        stroke-dashoffset: 0;
      }
    }
    -->
    ]]>
    </style>

    <path d="M200 200 L300 300 M400 400 L500 500" />
    
</svg>

 

3、

4、

5、

 

posted @ 2018-02-01 15:07  Html5Skill  阅读(379)  评论(0编辑  收藏  举报