svgpathjquery-animatesvg-animate

How can I animate a <path> object in SVG

<g id = "doc">

        /*Doc*/
        <path d = "M 100 100 L 150 100 L 170 120 L 170 190 L 100 190 L 100 100 Z M 150 100 L 150 120              
            L 170 120 M 120 140 L 150 140  M 120 160 L 150 160" stroke = "black" stroke-width = "8px"  fill = "white" transform = "translate(350, 110)">

        </path>

</g>

    <animate xlink:href = "#doc" attributeName = "x" from = "450" to = "1000" dur = "4" repeatCount = "indefinite" />

If I try to animate the with the id = "doc", which is located inside a tag, the animation is not working. Thanks for help!

Solution

  • Your SVG was a bloated file icon:

    The only animation I can think of is:

    <svg viewBox="0 0 90 110" style="background:pink;height:180px">
   <path d="m10 10 50 0 20 20 0 70-70 0 0-90zm50 0 0 20 20 0m-50 20 30 0m-30 20 30 0" 
         stroke="black" stroke-width="8px" fill="white">
     <animatemotion path="m0 0h100" dur="4s" repeatCount="indefinite"/>
   </path>                  
</svg>

    Update - animationMotion doesn't work in Chrome IMG and OBJECT tags

    animationMotion does work inside an IMG tag in FireFox

    To make it work in Chrome, change it to an animateTransform animation

    Since my favorite pastime on a lazy Sunday is to clean SVGs, here is your code:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1320 520" style="background:pink" fill="black" stroke="black">
    <g id="deviceleft">
        <rect x="355" y="80" width="12" height="85" rx="5" />
        <rect x="355" y="185" width="12" height="40" rx="5" />
        <rect x="10" y="10" width="350" height="500" stroke-width="5" rx="10" fill="lightblue" />
        <circle cx="335" cy="35" r="8" fill="grey" stroke-width="7" />
    </g>
    <g id="deviceright">
        <rect x="1305" y="110" width="12" height="85" rx="5" />
        <rect x="1305" y="210" width="12" height="40" rx="5" />
        <rect x="1010" y="60" width="300" height="400" fill="grey" stroke-width="5" rx="10" />
        <rect x="1105" y="60" width="110" height="25" rx="10" />
        <circle cx="1185" cy="72" r="6" stroke="grey" stroke-width="4" />
        <rect x="1135" y="68" width="35" height="8" fill="darkgrey" rx="5" />
    </g>
    <g transform="translate(0 175)">
        <path d="m435 60 500 0m-1 0-19-10m19 10-19 10" stroke-width="6" />
        <path d="m385 20 50 0 20 20 0 70-70 0 0-90zm50 0 0 20 20 0m-50 20 30 0m-30 20 30 0" stroke-width="8"
            fill="white">
            <animateTransform attributeName="transform" type="translate" dur="4s" values="50 0;450 0"
                repeatCount="indefinite" />
        </path>
    </g>
</svg>