gpt4 book ai didi

svg - 在 SVG 中缩放圆

转载 作者:行者123 更新时间:2023-12-02 21:23:46 24 4
gpt4 key购买 nike

我有以下 SVG 代码。为了仅缩放圆,我必须缩放容器。我无法缩放 SVG 内的圆。

我可以访问circle元素,但为什么我不能喜欢其他html元素?代码是缩放圆还是容器?

<html>
<head>
<script>
function scale() {
document.getElementById('container').setAttribute('currentScale', 1.5);
}
</script>
</head>
<body>
<svg height="150" width="150" id="container">
<circle cx="25" r="20" cy="20" fill="blue" id="circle"></circle>
</svg>
<button id="zoom" onclick="scale()">scale</button>
</body>
</html>

最佳答案

我从未尝试过缩放整个 SVG(使用纯 SVG 变换属性)。但看起来你可以缩放 SVG 中的每个元素。在这种情况下,您必须先定位(选择)圆圈,然后再调用 setAttribute就可以修改transform属性为scale(1.5,1.5)像这样:

function scale() {
document.querySelector("#container > circle")
.setAttribute('transform', 'scale(1.5,1.5)');
}

这是Demo 。请注意,您必须选择选项 No Wrap - in <head> (在框架和扩展部分的右侧)。或者更好的是,您应该在 JS 代码编辑器中附加点击处理程序(而不是作为 HTML 代码中的属性内联)。

关于svg - 在 SVG 中缩放圆,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26029054/

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