Insert SVG document into HTML dynamically using JavaScript?

Insert SVG document into HTML dynamically using JavaScript? - javascript

How can I dynamically insert an SVG into HTML?
The problem right now is that the SVG is a document, and I can only find how to insert nodes. I have tried some different things to convert the SVG to a node, but have not found anything that works.
const svgDoc = new DOMParser().parseFromString(svgText, "text/html");
window.document.querySelector("#container").appendChild(svgDoc);
const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<title>My First Scalable Vector Graphic</title>
<desc>An experimental SVG from SitePoint.com</desc>
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
`;
<div id="container"></div>

Use document.documentElement to get the root element of a document.
const svgText = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
<title>My First Scalable Vector Graphic</title>
<desc>An experimental SVG from SitePoint.com</desc>
<g id="main">
<line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />
<polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />
<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />
<rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />
<circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />
<ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />
<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
</g>
</svg>
`;
const svgDoc = new DOMParser().parseFromString(svgText, "image/svg+xml");
window.document.querySelector("#container").appendChild(svgDoc.documentElement);
<div id="container"></div>

Related

Two or more SVGs in a page. How can I animate them on button click?

Same SVG is repeated in carousel multiple times. Carousel is constructed in PHP using a while loop. How can I trigger animation at the click of a next/prev button in carousel?
My jQuery code is as below. It animates only the first <animate> tag. I think I must have explained my whole point.
jQuery(document).ready(function($){
$('.first').click(function(){
$('animate')[0].beginElement();
$('animateTransform')[0].beginElement();
});
});
My SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
</g>
</g>
</svg>

You forgot to add a question style sheet. I restored the color values of the svg parts according to the figure.
Since all animations should start simultaneously at the click of a mouse, you can do without Javascript
To do this, add a launch command to each animation begin="Layer_1.click"
.container {
width:75%;
height:75%;
}
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}
<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
</g>
</g>
</svg>
</div>

Move shape along parts of path

I am looking for a method to move an element along a path in stages kind of like a subway map. This is to illustrate position within a process. Any pointers toward libraries or techniques much appreciated.

To animate the movement of the metro train along the path, the animateMotion command will be used.
To create a motion path, you must load the motion diagram into the vector editor
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="50%" height="50%" viewBox="0 0 1000 945" preserveAspectRatio="xMinYMin meet" >
<image xlink:href="https://i.stack.imgur.com/0c7Aq.jpg " width="100%" height="100%" />
</svg>
Then in the vector editor you need to add node points
Then save the file in the * .svg format and copy thepath formula to another file
<!-- Train track -->
<path id="track" d="M55.2 119.6H911.7V397.1H294.5v460.1H911.7V626.5" style="fill:none;stroke-width:8;stroke:gray"/>
Next, we write the animation formula
<animateMotion
xlink:href="#train"
begin="svg1.click"
dur="14s"
fill="freeze">
<mpath xlink:href="#track" />
</animateMotion>
Below is the full code
Animation starts after a click.
<svg id="svg1" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="50%" height="50%" viewBox="0 55 1000 945" preserveAspectRatio="xMinYMin meet" Style="border:1px solid gray;">
<style>
.s1 {
fill:white;
stroke:gray;
stroke-width:8;
}
</style>
<!-- Train track -->
<path id="track" d="M55.2 119.6H911.7V397.1H294.5v460.1H911.7V626.5" style="fill:none;stroke-width:8;stroke:gray"/>
<!-- Metro stations -->
<ellipse cx="58" cy="119" rx="27" ry="27" class="s1"/>
<ellipse cy="118" cx="911" ry="27" rx="27" class="s1" />
<ellipse cy="398" cx="910.3" ry="26.2" rx="26.9" class="s1" />
<ellipse cy="397.8" cx="294.5" ry="26.2" rx="26.9" class="s1" />
<ellipse cy="858" cx="294.5" ry="26.2" rx="26.9" class="s1" />
<ellipse cy="858" cx="911.7" ry="26.2" rx="26.9" class="s1" />
<ellipse cx="910" cy="628" rx="45" ry="45" fill="yellowgreen" stroke="gray" stroke-width="8" />
<g id="train_start " >
<circle cx="58" cy="119" r="55" stroke="dodgerblue" fill="yellowgreen" />
<circle cx="58" cy="119" r="27" stroke="dodgerblue" fill="white" />
</g>
<g id="train" >
<circle cx="0" cy="0" r="55" stroke="dodgerblue" fill="dodgerblue" />
<circle cx="0" cy="0" r="27" stroke="dodgerblue" fill="white" />
</g>
<animateMotion
xlink:href="#train"
begin="svg1.click"
dur="8s"
fill="freeze"
repeatCount="indefinite">
<mpath xlink:href="#track" />
</animateMotion>
</svg>

Convert SVG to and from JSON using JavaScript

I have created a Cordova Ionic project. I am working on an editor. How can I convert the below SVG content into JSON array and JSON array to SVG content via JavaScript?
<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
<!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
<g>
<title>background</title>
<rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
<g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
<rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
</g>
</g>
<g>
<title>Layer 1</title>
<rect total-price="129720" data-price="10" id="svg_2" height="69" width="188" y="47" x="63.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<line total-price="121164.47292" height="75.36667" width="151.66666" data-price="10.6" stroke-linecap="undefined" stroke-linejoin="undefined" id="svg_3" y2="124" x2="470.5" y1="50" x1="319.5" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
<ellipse total-price="190708.875" height="91.5" width="198.5" data-price="10.5" ry="45" rx="98.5" id="svg_4" cy="323" cx="159" fill-opacity="null" stroke-opacity="null" stroke-width="1.5" stroke="#000" fill="none"/>
</g>
</svg>

Could not play SVG animation once placed within webpage

I have created an animation using svgcircus.com, if I place it in webpage the animation doesn't play and just see static svg without animation but if I drag and drop SVG directly into browser then it plays:
Here is how I call it:
<img src="marker-with-wave.svg"/>
Here is my SVG:
<?xml version="1.0" standalone="no"?>
<!-- Generator: SVG Circus (http://svgcircus.com) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<circle id="actor_4" cx="50" cy="50" r="25" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_3" cx="50" cy="50" r="20" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_2" cx="50" cy="50" r="15" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<circle id="actor_1" cx="50" cy="50" r="10" opacity="1" fill="rgba(0,0,0,0)" fill-opacity="1" stroke="rgba(0,160,160,1)" stroke-width="2" stroke-opacity="1" stroke-dasharray=""></circle>
<g transform="translate(20 -1020)">
<path style="fill:#00A0A0;" d="M30,1043.4c-5.523,0-10,4.477-10,10c0,1.776,0.477,3.438,1.289,4.882
c0.135,0.24,0.276,0.476,0.43,0.704L30,1073.4l8.281-14.414c0.127-0.189,0.237-0.389,0.351-0.586l0.079-0.118
c0.811-1.445,1.289-3.106,1.289-4.882C40,1047.877,35.522,1043.4,30,1043.4z M30,1048.4c2.761,0,5,2.239,5,5c0,2.761-2.239,5-5,5
c-2.761,0-5-2.239-5-5C25,1050.639,27.239,1048.4,30,1048.4z"/>
<path style="fill:#008282;" d="M30,1047.15c-3.452,0-6.25,2.798-6.25,6.25c0,3.451,2.798,6.25,6.25,6.25
c3.451,0,6.25-2.799,6.25-6.25C36.25,1049.948,33.451,1047.15,30,1047.15z M30,1049.65c2.071,0,3.75,1.679,3.75,3.75
s-1.679,3.75-3.75,3.75s-3.75-1.679-3.75-3.75S27.929,1049.65,30,1049.65z"/>
</g>
<script type="text/ecmascript"><![CDATA[(function(){var actors={};actors.actor_1={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_1"),type:"circle",cx:50,cy:50,dx:20,dy:32,opacity:1};actors.actor_2={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_2"),type:"circle",cx:50,cy:50,dx:30,dy:30,opacity:1};actors.actor_3={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_3"),type:"circle",cx:50,cy:50,dx:40,dy:30,opacity:1};actors.actor_4={node:document.getElementById("SVG-Circus-59ac8158-f093-4171-00c0-061a33e45165").getElementById("actor_4"),type:"circle",cx:50,cy:50,dx:50,dy:30,opacity:1};var tricks={};tricks.trick_1=(function(_,t){t=(function(n){return--n*n*n+1})(t)%1,t=0>t?1+t:t;var i;i=0.00>=t?1+(0.5-1)/0.00*t:t>=0.13?0.5-(t-0.13)*((0.5-1)/(1-0.13)):0.5;var a=_._tMatrix,r=-_.cx*i+_.cx,x=-_.cy*i+_.cy,c=a[0]*i,n=a[1]*i,M=a[2]*i,f=a[3]*i,g=a[0]*r+a[2]*x+a[4],m=a[1]*r+a[3]*x+a[5];_._tMatrix[0]=c,_._tMatrix[1]=n,_._tMatrix[2]=M,_._tMatrix[3]=f,_._tMatrix[4]=g,_._tMatrix[5]=m});tricks.trick_2=(function(t,i){i=(function(n){return.5>n?2*n*n:-1+(4-2*n)*n})(i)%1,i=0>i?1+i:i;var _=t.node;0.1>=i?_.setAttribute("opacity",i*(t.opacity/0.1)):i>=0.2?_.setAttribute("opacity",t.opacity-(i-0.2)*(t.opacity/(1-0.2))):_.setAttribute("opacity",t.opacity)});var scenarios={};scenarios.scenario_1={actors: ["actor_1","actor_2","actor_3","actor_4"],tricks: [{trick: "trick_1",start:0,end:1.00},{trick: "trick_2",start:0,end:1}],startAfter:0,duration:2000,actorDelay:100,repeat:0,repeatDelay:1000};var _reqAnimFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.oRequestAnimationFrame,fnTick=function(t){var r,a,i,e,n,o,s,c,m,f,d,k,w;for(c in actors)actors[c]._tMatrix=[1,0,0,1,0,0];for(s in scenarios)for(o=scenarios[s],m=t-o.startAfter,r=0,a=o.actors.length;a>r;r++){if(i=actors[o.actors[r]],i&&i.node&&i._tMatrix)for(f=0,m>=0&&(d=o.duration+o.repeatDelay,o.repeat>0&&m>d*o.repeat&&(f=1),f+=m%d/o.duration),e=0,n=o.tricks.length;n>e;e++)k=o.tricks[e],w=(f-k.start)*(1/(k.end-k.start)),tricks[k.trick]&&tricks[k.trick](i,Math.max(0,Math.min(1,w)));m-=o.actorDelay}_reqAnimFrame(fnTick)};_reqAnimFrame(fnTick);})()]]></script>
</svg>

Instead of <img /> if I use <object></object> SVG is animation is working.
<object type="image/svg+xml" data="marker-with-wave.svg">
Your browser does not support SVG
</object>

Change an inline SVG's x and y with ecmascript

I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with
var inlineSVG = document.getElementById("inlineSVG");
inlineSVG.style.x = "90";
and that adds style="x:90px;" but that doesn't actually affect the element.
It's weird (in my head) because this works with a rect but not with an svg.
Here is my actual code:
<?xml version='1.0' encoding='UTF-8'?>
<svg width='1000' height='360'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink"
onload='init(evt)'
>
<script type='text/ecmascript'>
function init(event){
var wing1 = document.getElementById("wing1");
wing1.style.x = "90";
}
</script>
<circle cx="200" cy="140" r="5" fill="red" />
<circle cx="220" cy="170" r="5" fill="red" />
<circle cx="180" cy="170" r="5" fill="red" />
<circle cx="220" cy="220" r="5" fill="red" />
<circle cx="180" cy="220" r="5" fill="red" />
<svg id="wing1" x="280" y="100" viewBox="0 0 350 300">
<g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.505" cy="117.813" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.931" cy="117.819" rx="5.862" ry="4.547"/>
</g>
</g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.191" cy="125.538" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.617" cy="125.531" rx="5.861" ry="4.547"/>
</g>
</g>
</g>
<ellipse fill="#E6E7E8" cx="247.244" cy="121.796" rx="20.635" ry="38.017"/>
</svg>
<rect id="square" x="0" y="470" width="50" height="50" fill="#BADA55" style="fill-opacity : 0.5" />
<line x1="0" y1="0" x2="1000" y2="360" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
<line x1="0" y1="360" x2="1000" y2="0" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>

I tried adding !important to the value but it didn't work ( because I guess it doesn't count it as a valid number? ).
The solution is to directly change the x attribute like so:
selector.setAttribute("attr",val);

Develop Reference

JavaScript is the programming language of the Web.

Insert SVG document into HTML dynamically using JavaScript? - javascript

Related

Two or more SVGs in a page. How can I animate them on button click?

Move shape along parts of path

Convert SVG to and from JSON using JavaScript

Could not play SVG animation once placed within webpage

Change an inline SVG's x and y with ecmascript

Categories

Resources