I have Firefox 41 running here.
I have a full svg file's code taken just randomly from mons at wikimedia. (/%2212_World_fly.svg)
Then I tried the following two versions to push it into an div-element, once using the div's innerHTML, once by trying the div's appendChild.
innerHTML worked at least, though looking at the generated html with webdeveloper looked a bit suspicious with the lines
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" ".1/DTD/svg11.dtd">
also showing up.
Using appendChild didn't work at all.
I want to use something like appendChild, because I know there could be pitfalls when using innerHTML's parser.
So, how to get the svg file's full string into the div?
<html>
<head>
<script type="application/javascript">
function dgebi(id) {
return document.getElementById(id);
}
// short svg file as string
var svgtext = ... //... here I added the string from /%2212_World_fly.svg
var d;
function init() {
d = dgebi('id:testdiv');
//useInnerHTMLToCreateSVG();
useDOMParser();
}
function useInnerHTMLToCreateSVG() {
d.innerHTML = svgtext;
}
function useDOMParser() {
// see
var parser = new DOMParser();
var doc = parser.parseFromString(svgtext, "image/svg+xml");
// returns a SVGDocument, which also is a Document.
d.appendChild(doc);
}
function createElementSVG() {
var se = document.createElement('SVG');
d.appendChild(se);
console.log(se);
}
</script>
</head>
<body onload="init();">
<div style="width:400px;height:400px;border: 1px #ff0000 solid;" id="id:testdiv"></div>
</body>
</html>
I have Firefox 41 running here.
I have a full svg file's code taken just randomly from mons at wikimedia. (https://upload.wikimedia/wikipedia/mons/c/c6/%2212_World_fly.svg)
Then I tried the following two versions to push it into an div-element, once using the div's innerHTML, once by trying the div's appendChild.
innerHTML worked at least, though looking at the generated html with webdeveloper looked a bit suspicious with the lines
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3/Graphics/SVG/1.1/DTD/svg11.dtd">
also showing up.
Using appendChild didn't work at all.
I want to use something like appendChild, because I know there could be pitfalls when using innerHTML's parser.
So, how to get the svg file's full string into the div?
<html>
<head>
<script type="application/javascript">
function dgebi(id) {
return document.getElementById(id);
}
// short svg file as string
var svgtext = ... //... here I added the string from https://upload.wikimedia/wikipedia/mons/c/c6/%2212_World_fly.svg
var d;
function init() {
d = dgebi('id:testdiv');
//useInnerHTMLToCreateSVG();
useDOMParser();
}
function useInnerHTMLToCreateSVG() {
d.innerHTML = svgtext;
}
function useDOMParser() {
// see https://developer.mozilla/de/docs/Web/API/DOMParser#Parsing_an_SVG_or_HTML_document
var parser = new DOMParser();
var doc = parser.parseFromString(svgtext, "image/svg+xml");
// returns a SVGDocument, which also is a Document.
d.appendChild(doc);
}
function createElementSVG() {
var se = document.createElement('SVG');
d.appendChild(se);
console.log(se);
}
</script>
</head>
<body onload="init();">
<div style="width:400px;height:400px;border: 1px #ff0000 solid;" id="id:testdiv"></div>
</body>
</html>
2 Answers
Reset to default 5You need to append an element not a document i.e.
d.appendChild(document.adoptNode(doc.documentElement));
In practice you can leave out adoptNode. Though it is mandated by w3c (and noted by the8472 as being strictly correct) there are too many broken sites for browsers to enforce using it.
Also you can't create an SVG element with createElement (that will only create HTML elements). You need to use createElementNS i.e.
var se = document.createElementNS('http://www.w3/2000/svg', 'svg');
note the lower case name because SVG is case sensitive.
Example of working code:
var renderRatingReviews = function (opts) {
var options = opts || {},
namespace = 'http://www.w3/2000/svg',
svg = document.createElementNS(namespace, 'svg'),
circle = document.createElementNS(namespace, 'circle'),
arc = document.createElementNS(namespace, 'path'),
text = document.createElement('div'),
width = options.width || 100,
height = options.height || 100,
radius = width / 2,
container = options.container,
thickness = options.thickness || 9,
color = options.color === 'green' ? '#00B930' : options.color === 'orange' ? '#fe9d14' : options.color === 'red' ? '#ff5534' : '#00B930',
rating = options.rating || 8,
polarToCartesian = function (centerX, centerY, radius, angleInDegrees) {
var angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0;
return {
x: centerX + (radius * Math.cos(angleInRadians)),
y: centerY + (radius * Math.sin(angleInRadians))
};
},
describeArc = function (x, y, radius, startAngle, endAngle) {
var start = polarToCartesian(x, y, radius, endAngle),
end = polarToCartesian(x, y, radius, startAngle),
arcSweep = endAngle - startAngle <= 180 ? "0" : "1",
d = [
"M", start.x, start.y,
"A", radius, radius, 0, arcSweep, 0, end.x, end.y
].join(" ");
return d;
},
addSize = function (val) {
return val;
};
if (container) {
text.innerHTML = rating;
text.className = 'text';
svg.setAttribute('width', addSize(width));
svg.setAttribute('height', addSize(height));
circle.setAttribute('cy', addSize(height / 2));
circle.setAttribute('cx', addSize(width / 2));
circle.setAttribute('r', addSize(radius - (thickness / 2)));
circle.setAttribute('stroke', '#e8e8e8');
circle.setAttribute('stroke-width', addSize(thickness));
circle.setAttribute('fill', '#ffffff');
arc.setAttribute('stroke', color);
arc.setAttribute('stroke-width', addSize(thickness));
arc.setAttribute('fill', 'rgba(0, 0, 0, 0)');
arc.setAttribute('stroke-linecap', 'round');
arc.setAttribute('d', describeArc(width / 2, height / 2, addSize(radius - (thickness / 2)), 0, 359 * rating / 10));
svg.appendChild(circle);
svg.appendChild(arc);
container.appendChild(svg);
container.appendChild(text);
}
}
renderRatingReviews({
container: document.getElementById('elementId')
});
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744736073a4590752.html
评论列表（0条）