Menu
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.
914
The svg files need to be opened in a vector graphics software application such as Adobe Illustrator, CorelDraw or Inkscape (a free and open-source vector graphics editor which runs on Windows, Mac OS X and Linux).
Not only does it mean that SVG properties can be styled using CSS as presentation attributes or in style sheets, but this also can be applied to CSS pseudo-classes such as :hover or :active . SVG 2 also introduces more presentation attributes that can be used as styling properties.
SVG images can be created and edited with any text editor.
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:
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.
132
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.
26
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');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
