1

我有一个 svg 字符串。为了获取信息，我在此链接中得到了答案如何从 javascript 中的 svg 字符串获取信息？使用 jquery。但是有谁知道如何更改任何属性？例如如何将第 2 层矩形的高度更改为其他值？如何添加不存在的新属性？例如在第 2 层的矩形中添加 stroke-dasharray="1,1" ？谢谢

<svg width="612" height="394" xmlns="http://www.w3.org/2000/svg">
 <g>
     <title>Layer 1</title>
     <rect id="svg_1" height="152" width="265" y="44" x="91" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
 <g>
     <title>Layer 2</title>
     <rect id="svg_2" height="125" width="151" y="157" x="399" stroke-width="5" stroke="#000000" fill="#FF0000"/>
 </g>
</svg>

我的字符串 es 例如：str="<svg width........</g></svg>"

4

2 回答 2

2

只需为其设置一个值，而不仅仅是检索..

使用jquery，您可以使用第二个参数.attr()来使用要设置的值...

$('#svg_2').attr('height', 200);

和

$('#svg_2').attr('stroke-dasharray', "1,1");

演示在 http://jsfiddle.net/gaby/FX67f/1/

如果您想要实际的字符串，并且 svg 不在 DOM 中，而只是一个变量，那么您可以这样做

var fixedstr = $(str).wrapAll('<div>')
                     .find('g:eq(1) rect')
                     .attr('height', 200)
                     .attr('stroke-dasharray', "1,1")
                     .closest('div')
                     .html();

首先，我们从中创建一个 jquery 对象，然后将其包装在一个div元素中，以便稍后获取它.html()（实际的 svg 字符串）。

在第二个g元素中找到矩形，.find('g:eq(1) rect')然后使用.attr()来改变它的属性。

最后使用.closest('div')回到我们的容器 div，并使用.html()获取内容..

此版本的演示位于 http://jsfiddle.net/gaby/FX67f/2/

于 2013-01-02T10:57:42.463 回答
0

我没有尝试过，但它应该可以工作：设置一个新值：

$("svg").find("rect#svg_2").attr("height", new_val);
于 2013-01-02T10:55:53.950 回答