DiegoM Posted September 25, 2020 Share Posted September 25, 2020 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! Link to comment Share on other sites More sharing options...
PointC Posted September 25, 2020 Share Posted September 25, 2020 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. 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted September 25, 2020 Share Posted September 25, 2020 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now