How can I add a SVG graphic dynamically using java

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.

标签： javascript jquery html svg

3条回答

小情绪 Triste *

2楼-- · 2020-04-24 17:21

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

as t1nr2y points out, use the propper namespace (xmlns="http://www.w3.org/2000/svg")
the svg's height attribute is missing the quotes (height="100")
your svg elements is not closed (missing </svg>)
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>

0人赞添加讨论(0) 举报

祖国的老花朵

3楼-- · 2020-04-24 17:34

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>

0人赞添加讨论(0) 举报

一纸荒年 Trace。

4楼-- · 2020-04-24 17:37

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);

0人赞添加讨论(0) 举报

How can I add a SVG graphic dynamically using java

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间