gpt4 book ai didi

javascript - 使用javascript翻转SVG对象

转载 作者:行者123 更新时间:2023-11-30 11:28:28 26 4
gpt4 key购买 nike

我在尝试使用 javascript 翻转 SVG 对象时遇到问题。我已经搜索了几种翻转 svg 对象方向的方法,例如:

<g id = "object1" transform = "scale(-1,1) translate(-100,0)">
//code of svg object
</g>

当我试图在我的 js 文件中应用类似的代码时,它无法翻转对象。

svgdoc = evt.target.ownerDocument;
var node = svgdoc.getElementById("object1");
node.onclick = function(){
node.style.setProperty("scale", "(-1,1)",null);
node.style.setProperty("translate", "(-100,1)",null);
}

附注svg对象编码在.svg文件中,上面的js代码编码在另一个.js文件中

最佳答案

对于 SVG 元素,您需要使用 .setAttribute 而不是 .style

虽然都是DOM节点,但是SVG元素使用inline attributes对于这些操作。

除此之外,您还需要翻译您的项目以抵消应用缩放时的位置变化

document.querySelector('#group').addEventListener('click', function() {
this.setAttribute('transform', 'scale(-1, 1) translate(-100, 0)')
})
<svg viewBox="0 0 195 150" xmlns="http://www.w3.org/2000/svg">
<g id="group" stroke="green" fill="white" stroke-width="5">
<circle cx="0" cy="25" r="15"/>
<circle cx="20" cy="25" r="15"/>
<circle cx="40" cy="25" r="15"/>
<circle cx="60" cy="25" r="15"/>
<circle cx="80" cy="25" r="15"/>
<circle cx="100" cy="25" r="15"/>
</g>
</svg>

关于javascript - 使用javascript翻转SVG对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47119064/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com