MDN may have intermittent access issues April 18 13:00 - April 19 01:00 UTC. See whistlepig.mozilla.org for all notifications.

mozilla
Your Search Results

    stroke-dashoffset Redirect 1

    « SVG Attribute reference home

    the stroke-dashoffset attribute specifies the distance into the dash pattern to start the dash.

    If a <percentage> is used, the value represents a percentage of the current viewport.

    Values can be negative.

    Usage context

    Categories Presentation attribute
    Value <percentage> | <length> | inherit
    Initial value 1
    Animatable Yes
    Normative document SVG 1.1 (2nd Edition)

    Example

    Use stroke-dashoffset to animate SVG

    SVG:

    <path fill="none" stroke="deeppink" stroke-width="14" stroke-miterlimit="0" 
    d="M11.6 269s-19.7-42.4 6.06-68.2 48.5-6.06 59.1 12.1l-3.03 28.8 209-227s45.5-21.2 60.6 1.52c15.2 22.7-3.03 47-3.03 47l-225 229s33.1-12 48.5 7.58c50 63.6-50 97-62.1 37.9" />

    JavaScript

    var path = document.querySelector('.squiggle-animated path'); 
    var length = path.getTotalLength(); 
    
    // Clear any previous transition 
    path.style.transition = path.style.WebkitTransition = 'none'; 
    
    // Set up the starting positions 
    path.style.strokeDasharray = length + ' ' + length; 
    path.style.strokeDashoffset = length; 
    
    // Trigger a layout so styles are calculated & the browser 
    // picks up the starting position before animating 
    path.getBoundingClientRect(); 
    // Define our transition 
    path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out'; 
    
    // Go! 
    path.style.strokeDashoffset = '0';

    Elements

    The following elements can use the stroke-dashoffset attribute

    Document Tags and Contributors

    Contributors to this page: Sheppy
    Last updated by: Sheppy,