如何使SVG <use>元素围绕自己的中心旋转？
如何使SVG <use>元素围绕自己的中心旋转？
提问于 2022-10-11 21:16:10
我使用SVG作为另一个SVG的一部分。我想控制在SVG中的<use>元素在<use>元素本身的中心旋转。我遵循前一个问题在CSS中设置transform-origin和transform-box。但是，它不起作用。
这是我的密码。您可以拖动滑块来旋转我想要旋转的元素(胡萝卜)。我怎样才能让胡萝卜围绕着自己的中心旋转呢？
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' >
预期结果：
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-10-11 21:30:27
只需删除x和y，或者使用translate3d，如果要将其定位为不溢出：
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' >
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74034206
复制相关文章
相似问题
腾讯云开发者
