appending entire svg to dom element leads to Exception... "String contains an invalid character" code: "5"
Question
I'd like to appending an entire svg element to an childless element of the DOM. I tried the d3-style and the common style and both lead me to this error:
[Exception... "String contains an invalid character" code: "5" nsresult: "0x80530005 (InvalidCharacterError)" location: "<unknown>"]
How do I append it correct?
// with d3
var dropTargetsDiv = d3.select(".droptargets").html("");
dropTargetsDiv.append(svgPic);
// without d3
var dropTargetsDiv = window.document.getElementById("canvas").parentNode;
dropTargetsDiv.innerHTML="";
dropTargetsDiv.appendChild(window.document.createElement(svgPic));
//the svg content is taken from a text area...
var svgPic = scope.$parent.export;
//and looks fine
<svg id="canvas"><g id="dashboard-content"><rect id="dropPanel"></rect></g></svg>
// the structure
<div class="droptargets"...
<svg id="canvas"...
<g id="dashboard-content...
2 answers
solution1
2 2014-04-08 08:14:11
D3's .append() doesn't take the contents of the element to be appended. To quote the documentation:
Appends a new element with the specified name as the last child of each element in the current selection [...] The name may be specified either as a constant string or as a function that returns the DOM element to append.
So to append an SVG element, you should do
var svg = dropTargetsDiv.append("svg");
and then populate the contents of the node, ie add the g element and anything else that may be there.
solution2
0 2014-04-08 15:22:25
Insert svg text into your SVG DIV by dropTargetsDiv.innerHTML=mySVGText . This will completely replace the previous.
Example 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 style='font-family:arial'>
<center>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:6px;'>
Replace DIV.innerHTML with new SVG text
</div>
<br />New SVG Source:<br />
<textarea id=svgNewSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:100px'>
<svg id="mySVG2" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<rect width=150 height=100 x=100 y=100 fill=blue />
</svg>
</textarea>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG1" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<circle r=150 cx=200 cy=200 fill=red />
</svg>
</div>
<center><button onClick=replaceSVG()>Replace SVG</button></center>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:100px'>
</textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:200px'></textarea>
</center>
<script id=myScript>
function replaceSVG()
{
svgDiv.innerHTML=svgNewSourceValue.value
svgSourceValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
svgSourceValue.value=svgDiv.innerHTML
jsValue.value=myScript.text
}
</script>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.