Utilizing an SVG within another SVG, I am trying to manipulate the rotation of the <use> element in the SVG around its own center. I have attempted to use tips from a previous question to set the transform-origin and transform-box properties in the CSS, but it seems to be ineffective.
Displayed below are my codes. You can interact with the slider to rotate the element (carrot) I am looking to animate. How can I ensure the carrot rotates around its own center?
const slider = document.getElementById("slider")
const myUse = document.getElementById("myUse")
slider.oninput = function(){
myUse.style.transform = "rotate("+slider.value+"deg)"
}#myUse{
transform-origin: 50% 50%;
transform-box: fill-box;
}<svg id="carrot" fill="#000000" viewBox="0 0 50 50" width="50px" height="50px">
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8"></path>
</svg>
<svg>
<use id="myUse" x="30" y="30" href="#carrot" style="transform: rotate(0deg);"></use>
</svg>
Rotation
<input id="slider" type="range" min="0" max="360" value="0" step='1' >Expected outcome: https://i.sstatic.net/Hy65m.png