Scripting between HTML and SVG

JavaScript
1

Hello to everyone!

I’m working on a project using JQuery and Keith Woods’ extension to provide SVG functionality.

My final goal is to develop some kind of HMI/SCADA implementation.

My intention is to have an svg graphic representing some kind of process and then change certain shapes parameters from scripting part.

I’m pretty new to Javascript, JQuery and so on. But I’m trying to make my way by reading a lot on internet. However I couldn’t find a clue about my most recent issue.

Mi idea is to embed and svg file created before on Inkspace. This would be the skeleton of the process I want to represent.

Then, from the html document where this svg file is embedded, I want to alter certain parameters of the shapes inside, for instance I want to change the colour of a particular rectangle.

So, I embed the file in the html document like this:
<embed name=“scada” id=“scada” src=“svgfile.svg” type=“image/svg+xml” width=“100%” height=“800”/>

Let’s suppose now, that inside the file “svgfile.svg” I have the following recangle (rect1):
<rect id=“rect1” x=“100” y=“60” rx=“20” ry=“20” width=“100” height=“100” style=“fill:red;stroke:black;stroke-width:5;opacity:0.5”/>

How can I now, from the html document, instance this rectangle to change the “fill” attribute?

For instance, I want to change the colour when I press a button on the html page which calls the following function (inside html javascript code, NOT svg file):
$(‘#link’).click(function(){
// I NEED TO KNOW WHAT TO PUT IN HERE
});

I have found something in here: http: //www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#JavaScript (Specifically in the “Scripting between HTML and SVG” section) but I would rather preffer to use JQuery.

I hope I made myself clear.

Please help me and thanks in advance.

Francisco.

2

It looks like they have an example pretty close to what you want in the svg dom tab
http://keith-wood.name/svg.html

my guess


    var svg = $('#svgselect').svg('get'); 
    $("#rect1", svg.root()).attr('fill', "red");
3

Thanks for the answer!

I have looked at the example you pointed out.

As far as I can see in this example the svg “drawing” ($(‘#svgselect’).svg({onLoad: function(svg)) is together with the scripting part in only one file, besides the shapes are created using the same jQuery SVG extension which later modifies them.

What I want to do, instead, is to embed an SVG file created on INKSCAPE, so this SVG file I embed doesn’t have this jQuery-like encoding (since it’s basically a graphic created on Inkscape)

For instance, my rectangles are not created as…

svg.rect(10, 20, 150, 100, {id: 'rect1',fill: 'red', stroke: 'black', strokeWidth: 3});

…but created as…

<rect id="rect1" x="10" y="20" width="150" height="100" style="fill:red;stroke:black"/>

So, my issue is…

  1. I create a graphic using Inkscape, in this graphic I insert a rectangle whose id is “rect1” (as it was defined before). I save this graphic as “svgfile.svg”

2)I embed this newly created svg graphic in my file “index.html”…

<embed name="scada" id="scada" src="svgfile.svg" type="image/svg+xml" width="100%" height="800"/>

3)Now, from my html file I want to change the colour of the rectangle using jQuery after, for instance, I click on a button which calls the following function…

$('#link').click(function(){
// CODE THAT CHANGES THE COLOUR OF THE RECTANGLE
});

I need a clue about how this code will look like, if there is a way to do this.

Thank you very much for reading so far :slight_smile:

Hope somebody can help me.

Greetings.

Francisco.

4

No ideas?

I’m lost without a slighter hint…

Please help!