3

嗨，我有以下代码，我希望能够通过按下按钮来更改圆的半径，我不知道在样式后使用什么。在 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>
4

5 回答 5

6

正如pp19dd 所指出的，在他的回答中，关键是setAttribute()，但是您似乎想要增加/减少元素的r属性circle（而不是简单地将其设置为特定值），您也需要使用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);
        }
    }
}

​​<a href="http://jsfiddle.net/davidThomas/QkAB5/" rel="nofollow noreferrer">JS Fiddle 演示。

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

为了简单起见，我使用document.querySelectorAll()了（而不是两次显式调用document.getElementById()）。这将在 Internet Explorer 中引起问题，尽管我不确定 SVG 在 Internet Explorer 中的实施情况如何，因此它可能不会让事情变得更糟。

尽管如此，IE 9 似乎完美地实现了该演示。这让我惊讶不已..！不过，IE 8 及更低版本，我不能说。

参考：

于 2012-04-16T21:13:50.100 回答
4

要更改属性，请使用setAttribute()函数：

function circle() {
    document.getElementById("circle").setAttribute('r', "50" );
}

function circle1() {
    document.getElementById("circle1").setAttribute('r', "50" );
}

例如，请参阅此 jsfiddle：http: //jsfiddle.net/dGmxh/2/

于 2012-04-16T20:55:05.790 回答
0

头部中的函数定义具有相同的名称，并且它们似乎没有右括号。

于 2012-04-16T20:53:37.580 回答
0

或者使用 svg.js 库，它使许多这些 SVG 任务更友好，类似于 jQuery 如何使 JavaScript 更友好。无论如何，在 svg.js 中，您创建一个半径为 1 的圆，然后将其半径更改为 5，如下所示：

var circ = draw.circle(1).attr({ cx: 10, cy: 10, fill: 'none', stroke: 'yellow', 'stroke-width': 2 });
circ.attr({ rx: 5, ry: 5 });

如果要在 500 毫秒内对半径的变化进行动画处理，只需像这样添加 animate() 方法

circ.animate(500).attr({ rx: 5, ry: 5 });

您可以在 onclick() javascript 方法中简单地执行代码的第二行（更改半径的代码）。

于 2013-08-11T11:14:35.150 回答
-1

使用点击

http://www.w3schools.com/jsref/event_onclick.asp

于 2012-04-16T20:48:22.950 回答