How to make SVG <use> element rotate around its own center?-CodePudding

I used an SVG as part of another SVG. I want to control to rotate the <use> element in the SVG around the center of the <use> element itself. I followed the

CodePudding user response：

Just remove x and y, or use translate3d if you want to position it to not overflow:

const slider = document.getElementById("slider")
const myUse = document.getElementById("myUse")
slider.oninput = function () {
  myUse.style.setProperty('--r', `${this.value}deg`);
}

#myUse {
    transform-origin: 50% 50%;
    transform-box: fill-box;
    transform: translate3d(25px, 25px, 0) rotate(var(--r, 0deg));
}
svg {
  border: 1px dotted red;
}

<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 viewBox="0 0 100 100" width="100px" height="100px">
  <use id="myUse" href="#carrot"></use>
</svg>

Rotation
<input id="slider" type="range" min="0" max="360" value="0" step='1' >