animated dash (via css class?)

[Tomasz Dindorf]

Hi!

I'm trying to animate the dashes on selected lines.  The effect would be the same as in the following bit of ordinary svg /css (for illustration only):

<svg>
    <path class = 'dash1 flow' d="M 0  50 H 100" />
    <path class = 'dash2 flow' d="M 0 100 H 100" />
</svg>

<style>
.dash1{
    stroke: blue;
    stroke-dasharray: 8,2;
}

.dash2{
    stroke: red;
    stroke-dasharray: 3,7;
}

.flow{
    animation-name: movingDash;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear
}

@keyframes movingDash {
    from {
        stroke-dashoffset: 10
    }
    to {
        stroke-dashoffset: 0
    }
}

</style>  to {
            stroke-dashoffset: 0
        }
    }
</style>

The relevant lines are created using

      array1.forEach(e => board.create('line', e, ...))

      array2.forEach(e => board.create('line', e, ...))

i.e. only some lines are to be dashed and animated.

I guess the easiest way would be to add css classes (.dash1 .flow) to the lines when creating them ... how do I do that? 

[https://jsxgraph.org/wiki only mentions css wrt text...]

Thanks!

[Alfred Wassermann]

Yes, that should be possible. As noted in https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray,

in SVG the attribute stroke-dasharray can be set with CSS (JSXGraph sets it as attribute).

If you want to set the CSS of a line like

    var line = board.create('line', e, ...))

you have access to the SVG DOM element through the object line.rendNode and setting the CSS class should work like e.g.

    line.rendNode.addClass('flow');

Please, keep us informed if it works.

Best wishes,

Alfred

[Tom Dindorf]

It works, with a slightly different syntax:

board.create('line', e, ...).rendNode.classList.add('dash1' , 'flow')

Thanks! :)