CODEWITHSUNDEEP
javascriptjqueryhtmlsvg
MarkL
MarkL

Reputation: 307

How can I add a SVG graphic dynamically using javascript or jquery?

I am trying to create a SVG tag structure only when or after page loads.

This request may seem strange but this is needed since most of the html markup is generated by a compiled authoring software application so I can't tamper with it. I can only "inject" javascript to create additional assets (ex: Divs) as needed.

See below for markup. [Portions of html markup have been omitted for clarity.]

<html>
....
<script>
function run()  {
var newSvg = document.getElementById('myDiv'); 
newSvg.outerHTML+='<svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="400" cy="400" r="40" stroke="red" stroke-width="4" fill="blue" />';
}
</script>
<body>
....
<div id="myDiv"></div>
....
<script>
run();
</script>
</body>
</html>

If I place the SVG markup in the destination location manually, page and SVG renders properly. If I try to create markup dynamically, I get nothing.

When I view html source after page loads there is no markup for the SVG which should have been created by the function.

I have tried doing via a <body onLoad="run()"> event but it also does not work.

Note: This function has worked fine when I need to create a new DIV dynamically.

What am I doing wrong? Thanks in advance to all.

Upvotes: 7

Views: 40314

Answers (5)

Amy Ruddy
Amy Ruddy

Reputation: 83

If you have the ability to modify CSS, a better way would be to create a div and give it an ID or class or add the class to the existing div... then add the styling with CSS. Also, OuterHTML() can have security implications.

const divSVG = document.querySelector('#myDiv').appendChild(document.createElement('div'))
divSVG.classList.add('svg','svg-app')
.svg-app {
  width:100px;
  height:100px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100px' viewBox='0 -960 960 960' width='100px' fill='%238C1AF6'%3E%3Cpath d='M240-160q-33 0-56.5-23.5T160-240q0-33 23.5-56.5T240-320q33 0 56.5 23.5T320-240q0 33-23.5 56.5T240-160Zm0-240q-33 0-56.5-23.5T160-480q0-33 23.5-56.5T240-560q33 0 56.5 23.5T320-480q0 33-23.5 56.5T240-400Zm0-240q-33 0-56.5-23.5T160-720q0-33 23.5-56.5T240-800q33 0 56.5 23.5T320-720q0 33-23.5 56.5T240-640Zm240 0q-33 0-56.5-23.5T400-720q0-33 23.5-56.5T480-800q33 0 56.5 23.5T560-720q0 33-23.5 56.5T480-640Zm240 0q-33 0-56.5-23.5T640-720q0-33 23.5-56.5T720-800q33 0 56.5 23.5T800-720q0 33-23.5 56.5T720-640ZM480-400q-33 0-56.5-23.5T400-480q0-33 23.5-56.5T480-560q33 0 56.5 23.5T560-480q0 33-23.5 56.5T480-400Zm40 240v-123l221-220q9-9 20-13t22-4q12 0 23 4.5t20 13.5l37 37q8 9 12.5 20t4.5 22q0 11-4 22.5T863-380L643-160H520Zm300-263-37-37 37 37ZM580-220h38l121-122-18-19-19-18-122 121v38Zm141-141-19-18 37 37-18-19Z'/%3E%3C/svg%3E");
}
<div>
  My Div
  <div id="myDiv"></div>
</div>

Upvotes: 0

Fireflies
Fireflies

Reputation: 1

 var newSvg = document.getElementById('myDiv');
newSvg.innerHTML += ``;

This works well across all browsers.

Upvotes: 0

Holger Will
Holger Will

Reputation: 7526

what you are doing is perfectly fine. There are some small flaws in your svg wich prevents it from showing up.

  1. as t1nr2y points out, use the propper namespace (xmlns="http://www.w3.org/2000/svg")
  2. the svg's height attribute is missing the quotes (height="100")
  3. your svg elements is not closed (missing </svg>)
  4. your circle is way outside your viewport (width="100" height="100" but cx="400" cy="400")

var newSvg = document.getElementById('myDiv');
newSvg.outerHTML += '<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height="100"><circle cx="40" cy="40" r="40" stroke="red" stroke-width="4" fill="blue" /></svg>';
<div id="myDiv"></div>

Upvotes: 18

t1nr2y
t1nr2y

Reputation: 656

The javascript for SVG is a little different, since they are in different namespaces. On quick research, I couldn't find exactly where I learned this, but I did find an old SO question which does show the how it is created a little differently. Since I haven't personally researched it, I can only suggest that the outerHTML function doesn't work, and you must find the SVG namespace equivalent. Try researching on w3.org site for more info on this.

Edit: After further research, please try creating your SVG element (rather than using a string).

For example:

  var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("width", "640");
  ...
  document.getElementById("div").appendChild(svg);

Upvotes: 8

Ruslan L&#243;pez
Ruslan L&#243;pez

Reputation: 4477

Your svg dimensions ( 100 x 100 ) are smaller than the position of your circle.

$(document).ready(function() {
  $('#myDiv').append('<svg  style="position:absolute;z-index:10;margin:0;padding:0;top:0em;left:0.5em" onclick="go()" width="100" height=100><circle cx="4" cy="4" r="4" stroke="red" stroke-width="4" fill="blue" /></svg>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myDiv"></div>

Upvotes: 0

Related Questions