我有一个 svg 字符串。 为了获取信息,我在这个链接中得到了答案how to get information from a svg string in javascript?使用 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>"
最佳答案
只需为其设置一个值,而不仅仅是检索..
对于 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 字符串)。
使用 .find('g:eq(1) rect')
在第二个 g
元素中找到 rect,然后使用 .attr()
改变它的属性..
最后使用.closest('div')
回到我们的容器div,并使用.html()
获取内容..
关于javascript - 更改 svg 字符串中的信息,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14120774/