javascript - 如何使用 JavaScript 更改 svg 的参数？

Question

嘿。
假设我的页面某处有 SVG 图形。当触发某些事件时，我想重新调整一组。我该怎么做？
示例代码:

<svg onresize="getDivSize(evt)">
    <g transform=scale(13)>
        <rect id="Square" class="chart"
            width="80" height="20"
            fill="black"
            stroke-width="0px"
            rx="8" ry="8" />
         <text id="TextElement" x="13" y="15" fill="green">Text</text>
     </g>
</svg>

我想更改 scale(13) 参数，为此应该在 function getScreenSize(evt) {...}?
或者如何以不同的方式达到类似的效果？

编辑
至于一般想法，我想调整图形大小而不在任何地方指定固定值。所以我的 div 大小是基于百分比的，现在我只希望我的图形完全适合我的 div，而不管它的大小。这就是为什么我想到 JS 在事件被触发(div 调整大小)时更改 scale() 参数。函数将放入 DivSize/rectBaseSize(x 或 y)的比例参数计算。

Answer 1

为 <g> 添加一个 id 属性然后试试这个:

document.getElementById("id_of_g_element").transform.baseVal.getItem(0).setScale(new_scalex,newscale_y);

或者:

document.getElementById("id_of_g_element").setAttribute("transform", "scale(" + new_scalex + "," + new_scaley + ")");

另一方面，为什么不使用 viewBox 来自动重新缩放 svg 内容？或者对于应该显示的内容是否有特定的限制？也可以使用基于 CSS3 媒体查询的非脚本解决方案来完成其中的一些工作，请参阅 http://www.youtube.com/watch?v=YAK5el8Uvrg (不要忘记查看该演示文稿中显示的演示文件链接的说明)。