Question

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

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

circle1：一个蓝色的圆圈，上面有id
text1：包含“ - ”且带有该

现在我可以使用

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

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

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

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

感谢。

Answer 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的程序进行更改。

度过愉快的一天。

Answer 2

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

Raphael JS：http://raphaeljs.com/

查看样本，您可以做任何事情。

Answer 3

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

由于我非常喜欢使用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');

Answer 4

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

我是在打扰英语的借口!!

使用jQuery修改svg文件

4 个答案: