Modify a svg file using jQuery
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.
Let's suppose that I have only two elements in an external svg file:
circle1: a blue filled circle witdh that id
text1: a text containing "--" with that id
Now I can view the file in my html with
<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".
How can I do that? Is there a jQuery based solution?
I have found the 开发者_开发问答jquery.svg plugin, but it seem that you can only modify a runtime created document.
Thanks.
Done!
Finally I found documentation on jQuery.svg. and on svg itself.
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:
<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 btnTest I set the text and the fill color.
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');
So your code must change depending on the program that generated the svg.
Have a nice day.
Well, there's a FANTASTIC library that you can use with jQuery or any other javascript:
Raphael JS: http://raphaeljs.com/
Check out the samples, you can do just about anything.
I use svgweb to 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.
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.
Here is the patch: jquery.svgweb-and-svgdom-patch I'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:
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.
After all that... You can do stuff like:
$('#mycirc').attr('fill', 'Red');
http://irunmywebsite.com/raphael/additionalhelp.php?q=path The 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
I'm ipodding so excuse broken English!!
加载中,请稍侯......
精彩评论