Interactive SVG with JavaScript | embed or not embed SVG? - javascript

I am trying to change the attribute of a circle in an SVG via javascript. When I have the SVG directly embeded in the HTML file, it works: 'kreis1' is changing color upon clicking a button. But when I have the SVG in an extra file (which I would like to have ultimatly when the SVG will have more than two circles), 'kreis1' doesn't react.
The is my SVG file, two circles:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"
onmouseover="evt.target.setAttribute('stroke-width','10');"
onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>
... and here is my HTML:
<!DOCTYPE html>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"
onmouseover="evt.target.setAttribute('stroke-width','10');"
onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>
<button onclick="getElementById('kreis1').innerHTML=changeColor()">Change!</button>
<object type="image/svg+xml" data="test.svg">
<html>
<head>
<script>
var htmlDocument = document;
function changeColor()
{
document.getElementById("kreis1").setAttribute("fill", "blue");
}
</script>
</head>
</html>


test.svg is a different document to the html document. Fortunately you can get the test.svg document via the contentDocument field on the <object> tag.
<!DOCTYPE html>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<circle id="kreis1" fill="#8CC63F" stroke="#000000" cx="53.318" cy="55.5" r="50"/>
<circle id="kreis2" fill="#C44741" stroke="red" cx="138.786" cy="130" r="30" stroke-width="0"
onmouseover="evt.target.setAttribute('stroke-width','10');"
onmouseout="evt.target.setAttribute('stroke-width','0');"/>
</svg>
<button onclick="getElementById('kreis1').innerHTML=changeColor()">Change!</button>
<object id="object1" type="image/svg+xml" data="test.svg">
<html>
<head>
<script>
var htmlDocument = document;
function changeColor()
{
document.getElementById("object1").contentDocument.getElementById("kreis1").setAttribute("fill", "blue");
}
</script>
</head>
</html>


It's a limitation of browser layout engines. External SVGs can't be styled by CSS. They have to be embedded in the HTML directly. JavaScript does permit interaction via the object tag per Robert's answer.
If you'd like to go down the embedding route (in my opinion it is more flexible) I've developed a script to automate this embedding, I've got a couple of hours so I'll bundle it up into something reusable this morning and update the question when it's done.
EDIT: Here's the embedding plugin, with docs: http://sakurasvg.appsondemand.com.au/

Related

Insert current timestamp inside svg

I am trying to insert a current timestamp inside an svg image:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="618px" height="100px" viewBox="0 0 618 100" style="enable-background:new 0 0 618 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{font-family:'Arial-BoldMT';}
.st2{font-size:36;}
</style>
<rect x="3" y="30" class="st0" width="611" height="100"/>
<text transform="matrix(1 0 0 1 263.4561 55.7754)" class="st1 st2">
</text>
<script type="text/javascript"><![CDATA[
var text = document.getElementByTagName('text');
var time = new Date();
var textnode = document.createTextNode(time);
text.appendChild(textnode);
]]></script>
</svg>
https://jsfiddle.net/km87r2ug/
Any ideas why this won't work?

If you looked in your browser's error console you'd see that getElementByTagName does not exist. The function you want is getElementsByTagName which returns more than one element so I took the first one...
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="618px" height="100px" viewBox="0 0 618 100" style="enable-background:new 0 0 618 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{font-family:'Arial-BoldMT';}
.st2{font-size:36;}
</style>
<rect x="3" y="30" class="st0" width="611" height="100"/>
<text transform="matrix(1 0 0 1 263.4561 55.7754)" class="st1 st2">
</text>
<script type="text/javascript"><![CDATA[
var text = document.getElementsByTagName('text')[0];
var time = new Date();
var textnode = document.createTextNode(time);
text.appendChild(textnode);
]]></script>
</svg>

There is no document.getElementByTagName method. Try using document.querySelector instead.

Edit html attribute of another page

I have code which is work for edit attributes of .svg file in same page
function changeInnerColor() {
var y = document.getElementsByClassName("inner");
var j;
for (j in y){
y[j].setAttribute("fill","#494949");
console.log(y[j]);
}
}
function changeOuterColor(){
var x = document.getElementsByClassName("outer");
var i;
for (i in x){
x[i].setAttribute("fill","#ff0");
console.log(x[i]);
}
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
<g id="Shape_1_copy_3_18_">
<ellipse fill="#0481D9" class="outer" cx="65" cy="65" rx="64" ry="64.018"/>
</g>
<g id="Shape_8">
<path fill="#FFFFFF" class="inner" d="M70.139,46.547h8.828V35.615h-8.828c-7.303,0-13.24,6.436-13.24,14.346v5.517H48.07v10.967h8.828v26.552
h11.033V66.444h11.035V55.478H67.932v-5.621C67.932,47.963,69.102,46.547,70.139,46.547z"/>
</g>
</g>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
<g id="Shape_1_copy_3_22_">
<ellipse fill="#EE3849" class="outer" cx="65" cy="65" rx="64" ry="64.017"/>
</g>
<g id="Shape_153">
<path fill="#FFFFFF" class="inner" d="M74.044,52.203H63.407c-2.937,0-5.318,2.378-5.318,5.318c0,2.934,2.382,5.318,5.318,5.318h10.637
c2.46,0,5.318,4.061,5.318,9.307c0,5.131-4.771,9.307-10.637,9.307h-5.318c-5.864,0-10.637-4.772-10.637-10.637V44.225
c0-2.94-2.381-5.318-5.318-5.318c-2.937,0-5.318,2.378-5.318,5.318v26.592c0,11.729,9.544,21.273,21.273,21.273h5.318
c11.73,0,21.273-8.948,21.273-19.943C89.999,61.146,82.842,52.203,74.044,52.203z"/>
</g>
</g>
</svg>
<input id="button1" type="button" value="Change Inner Color" onclick="changeInnerColor()"/>
<input id="button2" type="button" value="Change Outer Color" onclick="changeOuterColor()"/>
But i need to add that .svg file with img and edit it like
<img scr="facebook.svg">
And i need make changes into facebook.svg page as per user action.
THANKS.

Set your image
<img scr="facebook.php?innercolor=FFFFF&outercolor=0481D9" id="myImage">
Create your svg using php
<?php
header('Content-Type: image/svg+xml ');
$innercolor = $GET['innercolor'];
$outercolor = $GET['outercolor'];
?>
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="130px" height="130px" viewBox="0 0 130 130" enable-background="new 0 0 130 130" xml:space="preserve">
<g>
<g id="Shape_1_copy_3_22_">
<ellipse fill="#<?php echo $innercolor; ?>" class="outer" cx="65" cy="65" rx="64" ry="64.017"/>
</g>
<g id="Shape_153">
<path fill="#<?php echo outercolor; ?>" class="inner" d="M74.044,52.203H63.407c-2.937,0-5.318,2.378-5.318,5.318c0,2.934,2.382,5.318,5.318,5.318h10.637
c2.46,0,5.318,4.061,5.318,9.307c0,5.131-4.771,9.307-10.637,9.307h-5.318c-5.864,0-10.637-4.772-10.637-10.637V44.225
c0-2.94-2.381-5.318-5.318-5.318c-2.937,0-5.318,2.378-5.318,5.318v26.592c0,11.729,9.544,21.273,21.273,21.273h5.318
c11.73,0,21.273-8.948,21.273-19.943C89.999,61.146,82.842,52.203,74.044,52.203z"/>
</g>
Update your image
function changeInnerColor() {
var y = document.getElementsByID("myImage");
y.src = "facebook.php?innercolor=494949&outercolor=0481D9";
}
function changeOuterColor(){
var x = document.getElementsByID("myImage");
x.src = "facebook.php?innercolor=494949&outercolor=ff0";
}

Use the object tag
<object id="img1" type="image/svg+xml" data="img.svg"/>

How to morph one SVG path element into another on a click command?

I am trying to make a play and stop button. I don't know how to morph the triangle shape (it is a path) into the square shape (it is a path) when it has been clicked. Only showing one shape at a time. Can anyone help?
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
</style>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</svg>

I think one way is to define your two paths in defs and then use a use xlink:href="#shapeName" with an onclick handler that toggles that attribute or the corresponding DOM property, if supported..
A use element object with fully implemented SVG DOM has a href property with a baseVal property that can be read and set, so inside browsers as far as I have tested (with Firefox, Chrome, IE and Edge on Window) we can simply toggle that property, see https://jsfiddle.net/4x0gnkob/ for an online sample.
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="this.href.baseVal = this.href.baseVal == '#playTriangle' ? '#stopSquare' : '#playTriangle';"></use>
</svg>
An alternative is to toggle the DOM attribute, it seems a bit complicated in an HTML5 environment as I thought I could solve it with setAttributeNS and getAttributeNS in one line, after some testing it seems that within HTML5 getAttribute('xlink:href') works better, so the full code tries to test which function returns a value.
function toggleLink(element, value1, value2) {
var xlinkNS = 'http://www.w3.org/1999/xlink';
var linkName = 'xlink:href';
var oldValue = element.getAttributeNS(xlinkNS, linkName) || element.getAttribute(linkName);
if (element.hasAttributeNS(xlinkNS, 'href')) {
element.setAttributeNS(xlinkNS, linkName, oldValue == value1 ? value2 : value1)
}
else {
element.setAttribute(linkName, oldValue == value1 ? value2 : value1);
}
}
.st0{fill:none;
stroke:#000000;
stroke-width:4;
stroke-miterlimit:10;}
<svg class="playStop" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 971 530" style="enable-background:new 0 0 971 530;" xml:space="preserve">
<defs>
<path id="playTriangle" class="st0" d="M432,290.7V187.8c0-11.4,9.2-20.7,20.6-20.8c3.2,0,6.3,0.7,9.2,2.2l86.9,43.3l16.2,8.1c10.2,5,14.5,17.5,9.4,27.7c-2,4.1-5.3,7.5-9.4,9.5l-13.4,6.7l-89.8,44.8c-10.2,5-22.6,0.8-27.6-9.5C432.7,297,432,293.9,432,290.7z"/>
<path id="stopSquare" class="st0" d="M458.6,167h91.3c14.7,0,26.6,11.9,26.6,26.6v91.3c0,14.7-11.9,26.6-26.6,26.6h-91.3c-14.7,0-26.6-11.9-26.6-26.6v-91.3C432,178.9,443.9,167,458.6,167z"/>
</defs>
<use xlink:href="#playTriangle" pointer-events="all" onclick="toggleLink(this, '#stopSquare', '#playTriangle')"></use>
</svg>
Online at https://jsfiddle.net/w36k21uz/1/.

You cannot do all the things just like that, you can either use SMIL, which is to become deprecated, or use a dedicated animation engine. I developed KUTE.js with a SVG Plugin that does most of the things you probably need for SVG.
A quick demo (should work in Firefox only due to some Stackoverflow XSS issue):
<div style="width: 220px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" fill="indigo" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"></path>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"></path>
</svg>
</div>
<script id="core" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute.min.js"></script>
<script id="svg" src="https://cdn.jsdelivr.net/kute.js/1.5.5/kute-svg.min.js"></script>
<script>
var tween = KUTE.to('#rectangle', { path: '#star' }, {duration: 1500, yoyo: true, repeat: 1}).start();
document.addEventListener('click', function(){
!tween.playing && tween.start();
}, false);
</script>

Run Draw SVG use CSS

i have SVG path, and i want to make draw animation for this SVG like "CROSS"....
so could you help me guys,...?
<svg version="1.1" id="Layer_1" class="logo-cross" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="50%" height="100%" viewBox="0 0 63.7 64.7" style="enable-background:new 0 0 63.7 64.7;" xml:space="preserve">
<style type="text/css">
<![CDATA[.st0{fill:#929396;}.st1{fill:#F00;}]]>
</style>
<g>
<path class="st0" d="M1.3,1h3.5L1.3,4.5V1z M1.3,8.7L9,1h4.2L1.3,12.9V8.7z M1.3,54.7L55.1,1h-4.2L1.3,50.5V54.7z M1,63.1L63.1,1
h-4.2L1,58.9V63.1z M1.3,21.2L21.6,1h-4.2l-16,16V21.2z M1.3,46.3L46.7,1h-4.2L1.3,42.2V46.3z M1.3,38l37-37h-4.2L1.3,33.8V38z
M1.3,29.6L29.9,1h-4.2L1.3,25.4V29.6z"/>
<path class="st1" d="M1,59.6l3.5,3.5H1V59.6z M1,55.4l7.7,7.7h4.2L1,51.2V55.4z M1,13.6l49.5,49.5h4.2L1,9.4V13.6z M1,5.2
l57.9,57.9h4.2L1,1V5.2z M1,47.1l16,16h4.2L1,42.9V47.1z M1,21.9l41.2,41.2h4.2L1,17.7V21.9z M1,30.3l32.8,32.8H38l-37-37V30.3z
M1.3,38.7l24.4,24.4h3.9L1,34.5L1.3,38.7z"/>
</g>
</svg>

I would take a look at the D3 library as it will help you tremendously.

Show multiple SVG layers from HTML document

I have an SVG file containing 3 vector shapes:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="1500px" viewBox="0 0 1500 1500" enable-background="new 0 0 1500 1500" xml:space="preserve">
<svg:style xmlns:svg="http://www.w3.org/2000/svg" type="text/css">
g { display: none; }
g:target { display: block; }
</svg:style>
<g id="svgRed">
<rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
</g>
<g id="svgGreen">
<circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
</g>
<g id="svgBlue">
<path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
</g>
</svg>
As you see, I have each shape in a separate group. I've set all groups to display:none unless they are targeted. Now I can show the blue shape in an HTML document like so:
<object data="test.svg#svgBlue" type="image/svg+xml" width="600" height="860">
My question is, what if I want to show two of the shapes? I can't seem to target more than one shape in the HTML.
I'll be using javascript alongside this, so that is also acceptable to use.

Firstly, you must insert the SVG inline in your HTML5 Document. The object is not accessible via local javascript. Then it's possible to show/hide and change all elements via the DOM. You can load inline svg as xml using XMLHttpRequest
and then have the response fill the innerHTML of a DIV.
Try the files below. Once it is loaded you can use the buttons to toggle display.
Assume you have an svg file(my.svg)
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1500 1500">
<g id="svgRed" display="inline">
<rect x="301" y="344" fill="#DB1919" stroke="#000000" stroke-width="10" stroke-miterlimit="10" width="286" height="314"/>
</g>
<g id="svgGreen" display="inline">
<circle fill="#1AD84B" cx="692.143" cy="1007.381" r="180.953"/>
</g>
<g id="svgBlue" display="inline">
<path fill="#1A7ED8" d="M1271,1052c0,1.657-1.343,3-3,3h-251c-1.657,0-3-1.343-3-3V347c0-1.657,1.343-3,3-3h251 c1.657,0,3,1.343,3,3V1052z"/>
</g>
</svg>
And your HTML5 document is as below:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<center>
<div id="svgInlineDiv" style='background-color:lightgreen;width:300px;height:300px;'></div>
<button onClick=toggleDisplay(svgRed)>toggle red</button>
<button onClick=toggleDisplay(svgBlue)>toggle blue</button>
<button onClick=toggleDisplay(svgGreen)>toggle green</button>
</center>
<script id=myScript>
function toggleDisplay(me)
{
if(me.getAttribute("display")=="inline")
me.setAttribute("display","none")
else
me.setAttribute("display","inline")
}
</script>
<script>
document.addEventListener("onload",inlineSVG(),false)
function inlineSVG()
{
var SVGFile="my.svg"
var loadXML = new XMLHttpRequest;
function handler(){
if(loadXML.readyState == 4 && loadXML.status == 200)
svgInlineDiv.innerHTML=loadXML.responseText
}
if (loadXML != null){
loadXML.open("GET", SVGFile, true);
loadXML.onreadystatechange = handler;
loadXML.send();
}
}
</script>
</body>
</html>

Categories