使用jQuery修改svg文件

我有一个svg文件,有一些形状和一些文字。 我想在运行时修改svg,以便某些形状可以改变颜色,而某些文本可以改变其内容。

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

  1. circle1:一个蓝色的圆圈和那个id

  2. text1:包含带有该id的“ – ”的文本

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

 

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

我怎样才能做到这一点? 有基于jQuery的解决方案吗?

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

谢谢。

完成!

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

让我们从代码开始:

           
Click Me!

这个示例Red1.svg文件:

   Hello!  

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

在我的研究中,我发现:

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

    2A。 有风格

      rect.css('fill','green'); 

    2B。 带有特定标签

      rect.attr('fill','green'); 

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

祝你今天愉快。

好吧,有一个FANTASTIC库,你可以使用jQuery或任何其他JavaScript:

Raphael JS: http : //raphaeljs.com/

查看样品,您可以做任何事情。

我使用svgweb来显示和编程使用JavaScript操作SVG 。 我使用它是因为它使用Flash将SVG移植到IE6 +,并且因为它提供了一些巧妙的SVG加载function。

因为我非常喜欢使用jQuery,所以我修补它以使用svgweb。 我用Keith Woods脚本作为例子。 Keith的代码不支持最新版本的jQuery。

这是补丁: jquery.svgweb-and-svgdom-patch我一直想在svgweb contrib中给它一个合适的家,但还没有找到它。 它基于Keith的补丁,但有一些更新。 有一点需要知道,对于IE,你需要在jQuery加载之前将以下代码放在脚本中:

 document.querySelectorAll = null; 

在jQuery加载之后执行此操作是不够的,因此您必须在jQuery之前使用服务器端浏览器检测将其注入,或者在脚本中使用客户端浏览器检测。

毕竟……你可以做的事情:

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