Custom JavaScript examples

[Alphaplasti]

Here is some svg image and custom script which can be used for learning manipulating svg images by custom javascript. I used Inkscape for editing svg image(e.g. adding new elements).

1. Copy to "Custom javascript":

Code:

$(function(){  $('object').load(function() {        var svg = $('object')[0]; // Choosing svg    var svgDoc = svg.contentDocument; // Choosing content from svg    var svgItem = svgDoc.getElementById("rect4136"); // Choosing blind from content    var svgItem1 = svgDoc.getElementById("g4136"); // Choosing window from content    var svgItem2 = svgDoc.getElementById("rect4154-4"); // Choosing light from content         position_plus = Scada.encodeGroupAddress('6/0/54'); // Position       objectStore.addListener(position_plus, function(obj, type) {    height = Number( svgItem.getAttribute("height") ) + 10;    if ( height >= 100 ) { svgItem.setAttribute('height', '100') } else if ( height < 100 ) { svgItem.setAttribute('height', height) }    height = svgItem.getAttribute("height");    if (height > 50) {svgItem.style.fill='black'; svgItem2.style.opacity= '0'} else {svgItem.style.fill='red'; svgItem2.style.opacity= '80'}    });        position_minus = Scada.encodeGroupAddress('6/0/53'); // Position       objectStore.addListener(position_minus, function(obj, type) {    height = Number( svgItem.getAttribute("height") ) - 10;    if ( height <= 0 ) { svgItem.setAttribute('height', '0') } else if ( height > 0 ) { svgItem.setAttribute('height', height) }    height = svgItem.getAttribute("height");    if (height > 50) {svgItem.style.fill='black'; svgItem2.style.opacity= '0'} else {svgItem.style.fill='red'; svgItem2.style.opacity= '80'}    });        // onclick blind-up    svgItem.addEventListener('click', function (event) {         }, false);         svgItem.addEventListener('click', function (event) {         svgItem.setAttribute('height', '0')         }, true);        // onclick blind-down    svgItem1.addEventListener('click', function (event) {         }, false);         svgItem1.addEventListener('click', function (event) {         svgItem.setAttribute('height', '100');         }, true);   });   });

2. Upload 'interactive.svg' to /Images/Backgrounds'.

3. You can also add some buttons which change +/-10% height.
Currently they should be created in this way:
For +10%:  '6/0/54' which send 0 and 1
For -10%:  '6/0/53' which send 0 and 1

4. Try manipulating this svg

Hello buuuudzik, and everyone,

I'm trying your script with svg but it's doesn't work, I think I failed to link svg to script, I don't understand this line : 
var svg = $('object')[0]; // Choosing svg
Can you explain me how to choose svg please ?

Thanks a lot

Adrien