V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
selfcreditgiving
V2EX  ›  问与答

大家谁知道 SVG 的 stroke-dasharray、stroke-dashoffset 属性,具体是什么意思?

  •  
  •   selfcreditgiving · 2020-05-30 17:33:41 +08:00 · 1349 次点击
    这是一个创建于 1398 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先需求是这样的, 我想通过 svg 的这两个属性,实现箭头的流动的效果。 类似下面这样

    箭头动效

    但是遇到 stroke-dashoffset 这个属性,一直弄不明白它的原理。
    查了 MDN 和一些网上的介绍文章,还是没搞懂,这个 offset 是具体是向前 offset 还是向后 offset 。

    打比方画一条直线:

    一条直线

    上代码,现在加上 stroke-dasharray="100"

    <svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
        <g>
            <line stroke="#000000"
                  stroke-width="19"
                  stroke-dasharray="100"
                  x1="0" y1="90" x2="400" y2="90"/>
        </g>
    
        <g>
            <line stroke="#ccc"
                  stroke-width="19"
                  x1="0" y1="150" x2="400" y2="150"/>
        </g>
    </svg>
    

    效果是这样的,一段实线 100,一段虚线 100,(注意是先实线,后虚线!)这样不断重复下去。。。
    注:下面一条线是用来作对比的。
    虚线效果

    然后加上 stroke-dashoffset="50"

    <svg id="svgForStroke" width="400" height="200" xmlns="http://www.w3.org/2000/svg">
        <g>
            <line stroke="#000000"
                  stroke-width="19"
                  stroke-dasharray="100"
                  stroke-dashoffset="50"
                  x1="0" y1="90" x2="400" y2="90"/>
        </g>
    
        <g>
            <line stroke="#ccc"
                  stroke-width="19"
                  x1="0" y1="150" x2="400" y2="150"/>
        </g>
    </svg>
    

    加上 offset

    按照我的理解是,“从线段的起点开始,跳过 50 单位后,开始循环 一个 100 实线、一个 100 虚线,这样向线段的终点画过去”,但实际并不是我认为的这样。

    还有看 W3C 文档我确实是看不懂。。

    4 条回复    2020-05-30 22:09:17 +08:00
    noreplay
        1
    noreplay  
       2020-05-30 19:05:05 +08:00 via Android
    加了 offset 就可以认为是把纸条向前或者向后抽了一段。比如你下面的那个线条,就是往左抽了 50 个单位。
    noreplay
        2
    noreplay  
       2020-05-30 19:05:42 +08:00 via Android
    @noreplay 是先循环,然后再偏移
    selfcreditgiving
        3
    selfcreditgiving  
    OP
       2020-05-30 19:30:16 +08:00
    @noreplay #1 哦,也就是说,offset 为正数时, 向左抽,反之为负数时,向右抽。

    感觉和 mysql 语法里 limit offset 不太一样啊,limit 的 offset 是 跳过多少行数据,取后面的。
    noreplay
        4
    noreplay  
       2020-05-30 22:09:17 +08:00 via Android
    @selfcreditgiving 呃,其实把线条作为参照物的话,就是正值向右,负值向左了。
    这样就和 MySQL 里一样了🤣
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1061 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:58 · PVG 02:58 · LAX 11:58 · JFK 14:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.