SVG Line rotation

[DiegoM]

Hello, I have this SVG, the line is shrinked when rotates.

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 575.53 41.3" width="280px" transform="translate(0, 100)">
    <line
        id="Diagonal" className="cls-1" x1="284.48" y1="21.15" x2="569.48" y2="21.15"/>
    <g id="Capa_2" data-name="Capa 2">
        <g id="Capa_1-2" data-name="Capa 1">
            <g id="Flecha_horizontal" data-name="Flecha horizontal">
                <line className="cls-2" x1="571.72" y1="20.65" x2="1.72" y2="20.65"/>
            </g>
            <line className="cls-2" x1="552.53" y1="1.77" x2="572.53" y2="21.77"/>
            <line className="cls-2" x1="553.76" y1="39.36" x2="573.76" y2="19.36"/>
            <line className="cls-2" x1="23" y1="39.53" x2="3" y2="19.53"/>
            <line className="cls-2" x1="21.77" y1="1.94" x2="1.77" y2="21.94"/>
        </g>
    </g>
</svg>

I'm animating like this

 

timeline.to("#Diagonal", {rotate: -value, transformOrigin: '0px 0px'})

Any idea why is this happening? thanks!

[PointC]

It looks like that line is 285 units long, but your SVG viewBox is only 41.3 units high so the line extends out of the bounds when you rotate. The simple solution is to set your SVG overflow to visible.

 

svg {
  overflow: visible;
}

Happy tweening.

[ZachSaucier]

Another solution is to adjust your SVG, especially the viewport, to be able to contain all of the rotated line. Depending on your use case one solution might be better than the other.