te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>css - How to trigger an SVG animation with JavaScript? (No jQuery) - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>css - How to trigger an SVG animation with JavaScript? (No jQuery) - Stack Overflow

    css - How to trigger an SVG animation with JavaScript? (No jQuery) - Stack Overflow

    programmeradmin3浏览0评论

    I have an SVG line path animated with this sample I found:

    svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 130;
  animation: dash 6s 0s forwards infinite;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 290;
  }
  to {
    stroke-dashoffset: 0;
  }
}
    <svg viewbox="0 0 25 100" xmlns="">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>

    I have an SVG line path animated with this sample I found:

    svg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 130;
  animation: dash 6s 0s forwards infinite;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@keyframes dash {
  from {
    stroke-dashoffset: 290;
  }
  to {
    stroke-dashoffset: 0;
  }
}
    <svg viewbox="0 0 25 100" xmlns="http://www.w3/2000/svg">
<path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
</svg>

    It works fine but it's triggered when the page loads. Is there a way (let's say with a button) to trigger this animation using JavaScript?

    I can handle JS but I'm a noob with CSS and SVG animations.

    Can anybody give me an example of how I can do it with my actual CSS?

    • javascript
    • css
    • svg
    Share Improve this question edited Nov 26, 2021 at 19:57 Matthias Braun 34.4k27 gold badges153 silver badges176 bronze badges asked May 2, 2018 at 19:25 Alan AlvarezAlan Alvarez 6782 gold badges12 silver badges32 bronze badges 1
    • This is a small example I've written that shows how to animate an SVG with the browser's web animation API. It includes a button and slider to animate the SVG. – Matthias Braun Commented Aug 2, 2023 at 22:16
    Add a ment  | 

    4 Answers 4

    Reset to default 7

    You could also use SMIL animation syntax instead of CSS animation. This admittedly has the downside of not running in Microsoft browsers (both IE and Edge).

    var animation = document.getElementById("dash");

function showSVG() {
  animation.beginElement();
}
    svg {
  position: relative;
  width: 100%;
  height: 150px;
  left: 0%;
  top: 0%;
  display: block;
  background: transparent;
}

.path {
  stroke: black;
  stroke-dasharray: 290;
  stroke-dashoffset: 290;
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
}
    <button id="button" onclick="showSVG()">Click</button>
<svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3/2000/svg">
  <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent">
  <animate id="dash" 
    attributeName="stroke-dashoffset"
    from="290" to="0"
    begin="indefinite" 
    dur="6s" 
    fill="freeze" />
  </path>
</svg>

    This animation runs once every time you click. If you want it to repeat in fixed intervals, like CSS animation-repeat: infinite prescribes, use

    <animate id="dash" attributeName="stroke-dashoffset"
    from="290" to="0"
    begin="indefinite" dur="6s" repeatCount="indefinite" />

    svg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
    display: block;
    background: transparent;
}

.path {
    stroke: black;
    stroke-dasharray: 290;
    stroke-dashoffset: 130;
    stroke-width: 2px;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dashoffset: 290;
}

.animated {
    animation: dash 6s 0s forwards infinite;
    stroke-dashoffset: 0;
}

@keyframes dash {
    from {
        stroke-dashoffset: 290;
    }
    to {
        stroke-dashoffset: 0;
    }
}

    Then you can add the class .animated to your path with js whenever you need it.

    You should include your animation in a css class:

        .dash-animate {
        animation: dash 6s 0s forwards infinite;
    }

    @keyframes dash {
      from {
        stroke-dashoffset: 290;
      }
      to {
        stroke-dashoffset: 0;
      }
    }

    And then simply apply that class when/where you want using js:

    var button = getElementById('some-button');

button.addEventListner('click', function() {
  var elements = document.querySelectorAll('.path');
  Array.prototype.forEach.call(elements, function(el) {
    el.classList.add('dash-animate');
  });
});


    var svgPattern = document.getElementById("svg")
svgPattern.style.display = "none";
function showSVG(){
svgPattern.style.display = "block";
}
                    svg{
                    position:absolute;
                    width:100%;
                    height:100%;
                    left:0%;
                    top:0%;
                    display:block;
                    background:transparent;
                }
                
                .path {
                    stroke:black;
                    stroke-dasharray: 290;
                    stroke-dashoffset: 130;
                    animation: dash 6s 0s forwards infinite;
                    stroke-width:2px;
                    stroke-linecap:round;
                    stroke-linejoin:round;
                }
                
                @keyframes dash {
                  from {
                    stroke-dashoffset: 290;
                  }
                  to {
                    stroke-dashoffset: 0;
                  }
                }
    <button id ="button" onclick="showSVG()">Click</button>
               <svg id="svg" viewbox="0 0 25 100" xmlns="http://www.w3/2000/svg">
                    <path class="path" d="M0 50 L 12 50, 12 0, 25 0" fill="transparent"></path>
                </svg>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论