使用 jQuery 修改 svg 文件答案

【问题标题】：Modify a svg file using jQuery使用 jQuery 修改 svg 文件
【发布时间】：2011-08-04 01:13:26
【问题描述】：

我有一个带有一些形状和一些文本的 svg 文件。我想在运行时修改svg，让一些形状可以改变颜色，一些文本可以改变它的内容。

假设我在一个外部 svg 文件中只有两个元素：

circle1：一个蓝色的实心圆圈，带有该 ID
text1：包含带有该 id 的“--”的文本

现在我可以在我的 html 中查看文件了

<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>

从图像附近的一个按钮，使用 jQuery，我可以捕获 onClick 事件：我想用红色填充 cicle 并将文本更改为“hello word”。

我该怎么做？有没有基于 jQuery 的解决方案？

我找到了 jquery.svg 插件，但似乎只能修改运行时创建的文档。

谢谢。

【问题讨论】：

据此：keith-wood.name/svg.html#load，jquery svg可以加载和操作外部svg资源。不过，还没有尝试过 - 您可以在外部 svg 上操作的内容可能会受到限制。
您不需要插件来执行此操作。请参阅我写的这个问答：stackoverflow.com/questions/11978995/…

标签： jquery svg

【解决方案1】：

完成！

最后我找到了关于 jQuery.svg 的文档。以及 svg 本身。

让我们从代码开始：

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

还有这个示例 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>

使用 jQuery，我在运行时加载了外部 Red1.svg。点击btnTest，我设置了文本和填充颜色。

在我的研究中，我发现：

使用 jQuery.svg 我可以访问 SVG 文件和标准 html 标记中的元素
SVG 让您可以选择设置填充颜色的方式

2a。有风格
```
    rect.css('fill','green');
```
2b。带有特定标签
```
    rect.attr('fill','green');
```

所以你的代码必须根据生成 svg 的程序而改变。

祝你有美好的一天。

【讨论】：

谢谢。这对我帮助很大。
对我有用的 SVG 代码：

【解决方案2】：

嗯，有一个 FANTASTIC 库可以与 jQuery 或任何其他 javascript 一起使用：

拉斐尔 JS：http://raphaeljs.com/

查看示例，您几乎可以做任何事情。

【讨论】：

以前没听说过，但看起来很神奇
Raphael 很棒，但不会操作外部 SVG 文件。 @Redax 可能实际上不需要文件是外部的，在这种情况下，Raphael 非常适合像这样更简单的示例。
没错，但您可以使用 raphael.js 中的代码来了解如何使用 SVG 文件。
Raphael 的文档很差。您可以创建美丽的线条和圆圈以及...老虎。但与我需要的东西无关。
同意，文档很差。不过，您绝对可以填写一个圆圈并用它更改文本。如果您四处搜索，您会发现有关使用它的群组的讨论。

【解决方案3】：

我使用 svgweb 来显示和使用 JavaScript 以编程方式操作 SVG。我使用它是因为它使用 Flash 将 SVG 移植到 IE6+，并且因为它提供了一些简洁的 SVG 加载功能。

因为我非常喜欢使用 jQuery，所以我对它进行了修补以与 svgweb 一起使用。我以 Keith Woods 脚本为例。 Keith 的代码不支持最新版本的 jQuery。

这是补丁：jquery.svgweb-and-svgdom-patch 我一直想在 svgweb 贡献中给它一个合适的归宿，但还没有解决。它基于 Keith 的补丁，但有一些更新。要知道的一件事是，对于 IE，您需要在 jQuery 加载之前将以下代码放入脚本中：

document.querySelectorAll = null;

在 jQuery 加载之后再这样做是不够的，所以你必须使用服务器端浏览器检测来注入它，或者在 jQuery 之前在脚本中使用客户端浏览器检测。

毕竟...您可以执行以下操作：

$('#mycirc').attr('fill', 'Red');

【讨论】：

【解决方案4】：

http://irunmywebsite.com/raphael/additionalhelp.php?q=path 以上只是我网站上的一个交互式示例我只想说我发现拉斐尔狗是准确的，但它们是最小的，我认为作者鼓励自我探索

我正在 ipodding，所以请原谅我的英语不好！！

【讨论】：

一个不错的网站，但不是我需要的：很容易创建线条和文本以及随机气泡。我不能对现有的文档广告进行文字更改。