使用 jQuery 修改 svg 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5638431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Modify a svg file using jQuery
提问by Redax
I have a svg file with some shape and some text. I'd like to modify the svg at runtime, so that some shape can change color, and some text can change its content.
我有一个带有某种形状和一些文本的 svg 文件。我想在运行时修改 svg，以便某些形状可以更改颜色，而某些文本可以更改其内容。
Let's suppose that I have only two elements in an external svg file:
假设我在外部 svg 文件中只有两个元素：
circle1: a blue filled circle witdh that id
text1: a text containing "--" with that id
circle1：一个蓝色实心圆圈，带有那个 id
text1：包含“--”的文本
Now I can view the file in my html with
现在我可以在我的 html 中查看文件
<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>
From a button near the image, using jQuery, I can catch the onClick event: I'd like to fill the cicle with red and change the text to "hello word".
从图像附近的按钮，使用 jQuery，我可以捕获 onClick 事件：我想用红色填充 cicle 并将文本更改为“hello word”。
How can I do that? Is there a jQuery based solution?
我怎样才能做到这一点？有基于 jQuery 的解决方案吗？
I have found the jquery.svg plugin, but it seem that you can only modify a runtime created document.
我找到了 jquery.svg 插件，但似乎只能修改运行时创建的文档。
Thanks.
谢谢。
采纳答案by Redax
Done!
完毕！
Finally I found documentation on jQuery.svg. and on svg itself.
最后我在 jQuery.svg 上找到了文档。和 svg 本身。
Let's start with the code:
让我们从代码开始：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.svg/jquery.svg.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function()
{
$("#svgload").svg({
onLoad: function()
{
var svg = $("#svgload").svg('get');
svg.load('Red1.svg', {addTo: true, changeSize: false});
},
settings: {}}
);
$('#btnTest').click(function(e)
{
var rect = $('#idRect1');
rect.css('fill','green');
//rect.attrib('fill','green');
var txt = $('#idText1');
txt.text('FF');
});
});
</Script>
<div id="svgload" style="width: 100%; height: 300px;"></div>
<div id="btnTest">
Click Me!
</div>
</body>
</html>
And this sample Red1.svg file:
这个示例 Red1.svg 文件：
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect id="idRect1" fill="#FF0000" width="300" height="300"/>
<text id="idText1" x="20" y="20" font-family="sans-serif" font-size="20px" fill="black">Hello!</text>
</svg>
Using jQuery, I loaded the external Red1.svg at runtime. With a click on btnTestI set the text and the fill color.
使用 jQuery，我在运行时加载了外部 Red1.svg。单击btnTest我设置文本和填充颜色。
In my research I have found that:
在我的研究中，我发现：
- With jQuery.svg I can access the elements in the SVG file and standard html tag
SVG lets you choose the way you want to set the fill color
2a. with a style
rect.css('fill','green');2b. with a specific tag
rect.attr('fill','green');
- 使用 jQuery.svg 我可以访问 SVG 文件和标准 html 标签中的元素
SVG 允许您选择设置填充颜色的方式
2a. 有风格
rect.css('fill','green');2b. 带有特定标签
rect.attr('fill','green');
So your code must change depending on the program that generated the svg.
因此，您的代码必须根据生成 svg 的程序进行更改。
Have a nice day.
祝你今天过得愉快。
回答by Milimetric
Well, there's a FANTASTIC library that you can use with jQuery or any other javascript:
好吧，有一个 FANTASTIC 库，您可以将其与 jQuery 或任何其他 javascript 一起使用：
Raphael JS: http://raphaeljs.com/
拉斐尔 JS：http: //raphaeljs.com/
Check out the samples, you can do just about anything.
查看示例，您几乎可以做任何事情。
回答by Josh Pearce
I use svgwebto display and programmatically manipulate SVGs using JavaScript. I use it because it ports SVG to IE6+ using Flash, and because it provides some neat SVG loading features.
我使用svgweb来显示和使用 JavaScript 以编程方式操作SVG。我使用它是因为它使用 Flash 将 SVG 移植到 IE6+，并且因为它提供了一些简洁的 SVG 加载功能。
Since I like using jQuery so much, I patched it to work with svgweb. I used Keith Woods script as an example. Keith's code doesn't support the latest version of jQuery.
因为我非常喜欢使用 jQuery，所以我修补了它以使用 svgweb。我以 Keith Woods 脚本为例。Keith 的代码不支持最新版本的 jQuery。
Here is the patch: jquery.svgweb-and-svgdom-patchI've been meaning to give it a proper home in the svgweb contrib, but haven't gotten around to it. It's based on Keith's patch, but has some updates. One thing to know, is that for IE, you'll need to put the following code in a script before jQuery loads:
这是补丁：jquery.svgweb-and-svgdom-patch我一直想在 svgweb contrib 中给它一个合适的位置，但还没有解决。它基于 Keith 的补丁，但有一些更新。要知道的一件事是，对于 IE，您需要在 jQuery 加载之前将以下代码放入脚本中：
document.querySelectorAll = null;
It's not enough to do this after jQuery loads anymore, so you'd have to use server-side browser detection to inject it, or client-side browser detection in a script before jQuery.
在 jQuery 加载之后执行此操作是不够的，因此您必须使用服务器端浏览器检测来注入它，或者在 jQuery 之前的脚本中使用客户端浏览器检测。
After all that... You can do stuff like:
毕竟......你可以做这样的事情：
$('#mycirc').attr('fill', 'Red');
回答by Chasbeen
http://irunmywebsite.com/raphael/additionalhelp.php?q=pathThe above is just one interactive example on my site I would just say that I found Raphael dogs accurate but they are bear minimum, I think the author encourages self explore
http://irunmywebsite.com/raphael/additionalhelp.php?q=path以上只是我网站上的一个互动示例 我只想说我发现拉斐尔狗准确但它们是最低限度的，我认为作者鼓励自我探索
I'm ipodding so excuse broken English!!
我正在 ipodding，所以请原谅我的英语不好！！
