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）参数，以便在函数getScreenSize（evt）{...} 中执行该操作？或者如何以不同的方式实现类似的效果？

修改
至于一般的想法，我想调整图形大小，而无需在任何地方指定固定值。所以我的divs大小是基于百分比的，现在我只想让我的图形完全适合我的div而不管它的大小。这就是为什么每当事件被触发时我都会想到JS改变scale（）参数（div resize）。函数将进入DivSize / rectBaseSize（x或y）的比例计算。

Answer 1

将{id>属性添加到<g>，然后尝试：

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（不要忘记检查描述中是否有该演示文稿中显示的演示文件的链接）。

Answer 2

如果你只是想让SVG扩展到DIV的大小，你可以用CSS做到这一点

#stretched-image {
    margin: 0;
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    height:100%;
    background-size:cover;
    display: block; 
    background-position:50% 50%;
    background-image: url(../img/pic.svg); 
}

如何用JavaScript更改svg <g transform =“scale（X）”>的参数？</g>

2 个答案: