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

发布于 2024-10-12 05:31:24 字数 759 浏览 1 评论 0原文

嘿。
假设我的页面上的某个地方有 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，无论其大小如何。这就是为什么我想到每当触发事件（div 调整大小）时 JS 都会更改 scale() 参数。函数将放入 DivSize/rectBaseSize（x 或 y）的比例参数计算。

原文

Hey.
Let's say that somewhere on my page I have SVG graphics. There is one group that I would like to re-scale when some event is triggered. How do I do that?
example code:

<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>

I want to change scale(13) argument, to do that what should be in function getScreenSize(evt) {...}?
Or how achieve similar effect in different way?

edit
As for general idea I want to resize graphic without specifying fixed values anywhere. So my divs sizes are percentage based, now I just want my graphic to exactly fit my div regardless of its size. That's why I thought of JS changing scale() argument whenever event is fired (div resize). Function would put into scale argument computation of DivSize/rectBaseSize (x or y).

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

肩上的翅膀 2024-10-19 05:31:24

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

Add an id attribute to the <g> and then try this:

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

or alternatively:

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

On the other hand, why don't you just use a viewBox to have the svg contents rescaled automatically? Or are there specific constraints on what should be shown? It's also possible to do some of that with non-scripted solutions based on CSS3 media-queries, see http://www.youtube.com/watch?v=YAK5el8Uvrg (don't forget to check the description for links to the demo files shown in that presentation).

回复收藏 0 原文

假情假意假温柔 2024-10-19 05:31:24

如果您“只是”希望 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); 
}

If you 'just' want an SVG to scale to the size of a DIV, you can do that with 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); 
}

回复收藏 0 原文

~没有更多了~