Odd render bug with dynamic SVG
Reported by
groomble...@gmail.com,
Jun 29 2016
|
|||||||||
Issue description
Chrome Version : Version 50.0.2661.102 Ubuntu 14.04 (64-bit)
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL, along with the version, after other browsers where you
have tested this issue:
Safari:
Firefox: FAIL: 47.0 ubuntu 14.04
IE:
What steps will reproduce the problem?
(1) open index.html in the provided zip
(2) If you then inspect the DOM, it will show a SVG element.
(3) The SVG will fill with line elements being added by the javascript.
(4) None of the line elements will render.
(5) To force them to render, right click on the SVG element in the inspector, choose 'edit as HTML', and paste
<line x1="0" y1="0" x2="100" y2="100" style="display:none;stroke:black"></line>
or a similar piece of code after the opening SVG tag. Then, exit the editor box to allow the code to update. The lines will now render.
What is the expected result?
The lines should render as they are added by the javascript.
What happens instead?
The lines do not render. Common fixes for improperly rendered elements, like toggling display:none or accessing offsetHeight, do not fix the problem.
,
Jun 30 2016
There seems to be a number of namespace-related issues in this file. Here's an annotated diff:
--- treegen.orig.js 2016-06-30 12:49:37.597591799 +0200
+++ treegen.js 2016-06-30 12:51:14.177209467 +0200
@@ -7,8 +7,7 @@
document.body.style.background = treegencfg.bgcolor;
var svgSchema = "http://www.w3.org/2000/svg";
- var svg = document.createElement("svg");
- svg.setAttribute("xmlns", svgSchema);
+ var svg = document.createElementNS(svgSchema, "svg");
svg.id = "bgSVG";
svg.style.cssText = "position:fixed;top:0;left:0;bottom:0;right:0;";
document.body.appendChild(svg);
createElement will create an <svg> element that is not in the SVG namespace, and the setAttribute("xmlns", ...) does do anything AFAIK.
@@ -17,9 +16,9 @@
treegencfg.svg = svg;
var pline = [];
console.log(svg);
- var area = {x:svg.clientWidth,y:svg.clientHeight};
- svg.setAttributeNS(svgSchema, "width", area.x);
- svg.setAttributeNS(svgSchema, "height", area.y);
+ var area = {x: document.body.clientWidth, y: document.body.clientHeight};
+ svg.setAttribute("width", area.x);
+ svg.setAttribute("height", area.y);
for(var i = -1; i < area.x/100+1; i++) {
pline[i+1] = [i*100, area.y];
}
The 'width' and 'height' attributes should be in the "null" namespace.
I also edited the calculation for |area| to have a better chance of being what was expected, with quirks mode at play here and all. Consider adding <!DOCTYPE html> to index.html and fix up the issues around height of body et.c.
@@ -37,11 +36,11 @@
var c = [treegencfg.branchlength*Math.cos(a)+p[0], -treegencfg.branchlength*Math.sin(a)+p[1]];
cline[i] = c;
var line = document.createElementNS(svgSchema, "line");
- line.setAttributeNS(svgSchema, "x1", c[0]);
- line.setAttributeNS(svgSchema, "y1", c[1]);
- line.setAttributeNS(svgSchema, "x2", p[0]);
- line.setAttributeNS(svgSchema, "y2", p[1]);
- line.setAttributeNS(svgSchema, "style", "stroke:black;stroke-width:2px;");
+ line.setAttribute("x1", c[0]);
+ line.setAttribute("y1", c[1]);
+ line.setAttribute("x2", p[0]);
+ line.setAttribute("y2", p[1]);
+ line.setAttribute("style", "stroke:black;stroke-width:2px;");
console.log(line);
svg.appendChild(line);
}
Like above, these should be in the "null" namespace.
The reason a round-trip through "edit as HTML" makes it work is because that loses all the namespace specifications and hence gets the right namespace (including on the <svg> itself through parser-magic.)
I hope that helps.
,
Jun 30 2016
Please confirm that the information in comment #2 addresses the problem.
,
Jul 1 2016
Moving this nonessential bug to the next milestone. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Aug 8 2016
,
Sep 8 2016
No feedback was received in the last 30 days from reporter "groomblecom@gmail.com", so archiving this. Please re-open or file a new bug if this is still an issue. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by brajkumar@chromium.org
, Jun 30 2016Labels: M-53 OS-Linux OS-Mac OS-Windows
Status: Untriaged (was: Unconfirmed)