Question

可以从脚本中直接设置SVG元素的属性吗？

例如

<svg width="100px" height="100px" version="1.1" onload="setValues()" xmlns="http://www.w3.org/2000/svg">
    <script type="text/javascript">
    // <![CDATA[
    function setValues() {

        //Set cx || cy || whatever of circle

        // Set property of rect

    }
    // ]]>
    </script>
    <circle id="circleId" cx="50" cy="50" r="45" fill="green" />
    <rect id="rectId" height="40" width="400" y="0" x="170" style="fill:#ffffff" />
</svg>

Answer 1

当然，setAttribute会这样做。

<svg width="100px" height="100px" version="1.1" onload="setValues()" xmlns="http://www.w3.org/2000/svg">
    <script type="text/javascript">
    // <![CDATA[
    function setValues() {

        // Set property of circle
        document.getElementById("circleId").setAttribute('cx', '20');
        // Set property of rect
        document.getElementById("rectId").setAttribute('x', '10');
        document.getElementById("rectId").setAttribute('style', 'fill:red');


    }
    // ]]>
    </script>
    <circle id="circleId" cx="50" cy="50" r="45" fill="green" />
    <rect id="rectId" height="40" width="400" y="0" x="170" style="fill:#ffffff" />
</svg>

从内部脚本设置SVG元素的属性

1 个答案: