mozilla
Your Search Results

    stroke-dasharray

    « SVG Attribute reference home

    the stroke-dasharray attribute controls the pattern of dashes and gaps used to stroke paths.

    As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet

    Usage context

    Categories Presentation attribute
    Value none | <dasharray> | inherit
    Animatable Yes
    Normative document SVG 1.1 (2nd Edition)
    <dasharray>
    It's a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, 5,3,2 is equivalent to 5,3,2,5,3,2.

    Example

    <?xml version="1.0"?>
    <svg width="200" height="200" viewPort="0 0 200 300" version="1.1" xmlns="http://www.w3.org/2000/svg">
    
        <line stroke-dasharray="5, 5"              x1="10" y1="10" x2="190" y2="10" />
        <line stroke-dasharray="5, 10"             x1="10" y1="30" x2="190" y2="30" />
        <line stroke-dasharray="10, 5"             x1="10" y1="50" x2="190" y2="50" />
        <line stroke-dasharray="5, 1"              x1="10" y1="70" x2="190" y2="70" />
        <line stroke-dasharray="1, 5"              x1="10" y1="90" x2="190" y2="90" />
        <line stroke-dasharray="0.9"               x1="10" y1="110" x2="190" y2="110" />
        <line stroke-dasharray="15, 10, 5"         x1="10" y1="130" x2="190" y2="130" />
        <line stroke-dasharray="15, 10, 5, 10"     x1="10" y1="150" x2="190" y2="150" />
        <line stroke-dasharray="15, 10, 5, 10, 15" x1="10" y1="170" x2="190" y2="170" />
        <line stroke-dasharray="5, 5, 1, 5"        x1="10" y1="190" x2="190" y2="190" />
    
    <style><![CDATA[
    line{
        stroke: black;
        stroke-width: 2;
    }
    ]]></style>
    </svg>

    Live sample

    Elements

    The following elements can use the stroke-dasharray attribute

    Document Tags and Contributors

    Contributors to this page: trevorh, Jeremie
    Last updated by: trevorh,