Modify a svg file using jQuery

后端未结

关注

 4  1283

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.

相关标签:

4条回答

挽巷

2020-11-30 05:29

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!!

0 讨论(0)
发布评论:

提交评论
- 加载中...
遥遥无期

2020-11-30 05:42

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...
逝去的感伤

2020-11-30 05:46
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');
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

野性不改

2020-11-30 05:53

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.

0 讨论(0)