使用jQuery修改SVG文件 [英] Modify a svg file using jQuery
问题描述
我有一个带有某些形状和文本的svg文件.我想在运行时修改svg，以便某些形状可以更改颜色，而某些文本可以更改其内容.
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文件中只有两个元素:
Let's suppose that I have only two elements in an external svg file:
-
circle1:标识为蓝色的蓝色圆圈witdh
circle1: a blue filled circle witdh that id
text1:包含带有该ID的-"的文本
text1: a text containing "--" with that id
现在，我可以使用
<object data="Sample.svg" type="image/svg+xml" width="200" height="200" id="svg1"></object>
使用jQuery，从图像附近的按钮中，我可以捕获onClick事件:我想用红色填充cicle，并将文本更改为"hello word".
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的解决方案吗?
How can I do that? Is there a jQuery based solution?
我已经找到了jquery.svg插件，但是看来您只能修改运行时创建的文档.
I have found the jquery.svg plugin, but it seem that you can only modify a runtime created document.
谢谢.
推荐答案
完成！
最后，我在jQuery.svg上找到了文档.以及svg本身.
Finally I found documentation on jQuery.svg. and on svg itself.
让我们从代码开始:
<!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文件:
And this sample Red1.svg file:
<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，我设置文本和填充颜色.
Using jQuery, I loaded the external Red1.svg at runtime. With a click on btnTest I set the text and the fill color.
在我的研究中，我发现:
In my research I have found that:
- 使用jQuery.svg，我可以访问SVG文件和标准html标签中的元素
-
SVG使您可以选择设置填充颜色的方式
- 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.风格
rect.css('fill','green');
2b.带有特定标签
rect.attr('fill','green');
因此，您的代码必须根据生成svg的程序进行更改.
So your code must change depending on the program that generated the svg.
祝你有美好的一天.
这篇关于使用jQuery修改SVG文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
