csslinevisioconnector

How to create a moving line in Visio?

I have been working with Visio lately and am used to the basic use of it, but am curious how you can build a 'moving' line in your drawing. Please see this link (and activate Lift A and/or B, C,D, E):

marquee line

Picture to illustrate the idea

I don't understand what needs to be done to make the interrupted connector line to be moving like that. Anybody any idea?

Solution

  • The ability to build somewhat "live" diagrams was partially the reason for me to build that svgpublish visio extension... This particular effect for example is a simple CSS animation on a line.

    svg:

    <g id="liftA">
   <path d="..a complex lift path here..." />
</g>

    css:

    .lift-on {
    stroke-dasharray: 7 1;
    stroke-dashoffset: 8;
    stroke-width: 4px;
    animation: marquee 1s linear infinite;
}

@keyframes marquee {
    from { stroke-dashoffset: 8; }
    to { stroke-dashoffset: 0; }
}

    script:

    // to turn on the lift:
document.getEelementById("liftA").classList.add('lift-on');

    Visio diagram by itself is pretty much static unfortunately, the best I could think of is probably some sort of VBA timer animation.