gpt4 book ai didi

javascript - 如何通过按 javascript/svg 中的按钮将形状的半径设置为更大或更小

转载 作者:行者123 更新时间:2023-12-03 01:35:07 25 4
gpt4 key购买 nike

嗨,我有以下代码,我希望能够通过按按钮来更改圆的半径,我不知道样式后要使用什么。在里面document.getElementById("circle1").style.r="10";部分代码

<html>
<head>
<script>
function circle() {
document.getElementById("circle").style.r="50";
}

function circle1() {
document.getElementById("circle1").style.r="10";

}


</script>


</head>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg" >
<circle id = "circle" cx = "100" cy = "800" r = "30" stroke="blue" stroke-width = "2" fill = "black"/>
<circle id = "circle1" cx = "20" cy = "500" r = "30" stroke="blue" stroke-width = "2" fill = "black"/>
</svg>
<body>
Set size of circles
<input type="button" onclick="circle()" value="big" />
<input type="button" onclick="circle1()" value="small" />
</body>
</html>

最佳答案

正如 pp19dd, in his answer 所指出的,关键是 setAttribute(),但似乎您想要增加/减少 circle 元素的 r 属性(而不仅仅是简单地将其设置为特定值),您还需要使用getAttribute()

这是一个相当简单的函数和实现,我认为它可以满足您的需求:

function circle(delta){
if (!delta){
return false;
}
else {
var e = document.querySelectorAll('circle[id^=circle]'),
changeBy = 10;
if (delta == 'big'){
e[0].setAttribute('r',parseInt(e[0].getAttribute('r'),10) + changeBy);
e[1].setAttribute('r',parseInt(e[1].getAttribute('r'),10) + changeBy);
}
else if (delta == 'small'){
e[0].setAttribute('r',parseInt(e[0].getAttribute('r'),10) - changeBy);
e[1].setAttribute('r',parseInt(e[1].getAttribute('r'),10) - changeBy);
}
}
}

var inputs = document.getElementsByTagName('input'),
buttons = [];

for (var i = 0, len = inputs.length; i < len; i++) {
if (inputs[i].type == 'button') {
inputs[i].onclick = function(){
circle(this.value);
}
}
}

​​ JS Fiddle demo .

请注意,我没有对圆的 r 属性的无效负值进行任何检查。您可能想自己添加。

为了简单起见,我使用了 document.querySelectorAll()(而不是两次显式调用 document.getElementById())。这导致problems in Internet Explorer ,尽管我不确定 SVG 在 Internet Explorer 中的实现情况如何,因此它可能不会让事情变得更糟。

尽管如此,IE 9 似乎完美地实现了该演示。这让我惊讶不已..!不过,我无法确定 IE 8 及更低版本。

引用文献:

关于javascript - 如何通过按 javascript/svg 中的按钮将形状的半径设置为更大或更小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10181429/

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