svg-insertAdjacentHTML is not working on firefox version 35 and below?

Question

I'm trying to draw a line by using svg. So I was used the insertAdjacentHTML. But this is working on chrome but not working in firefox.

My html code as follow

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; ">
    <svg id='svg_main' height="330" width="1100"></svg>
</div>

My javascript is as follow

var svgid = document.getElementById('svg_main');
var str_lne = 60;
var data = '<path id="lineAB" d="M 50 '+str_lne+' L 1050 '+(str_lne)+'" transform="translate(0.5,0.5)"  stroke="#707073" fill="none"  storke-width="1px" opacity="1" ></path>';
svgid.insertAdjacentHTML('beforeend',data);

It doesn't run by the localhost on the firefox(below 35).

For example,

I open the firefox and enter the url (localhost/svgtest.html) now the svg line is not showing. But, I save the page by ctrl+s and open by firefox it shows the line.

Please help me out from this problem and clarify the reson of the problem.

Answer 1

Your code works just fine in Firefox. Apart from the fact you have a typo (storke-width).

var svgid = document.getElementById('svg_main');
var str_lne = 60;
var data = '<path id="lineAB" d="M 50 '+str_lne+' L 1050 '+(str_lne)+'" transform="translate(0.5,0.5)"  stroke="#707073" fill="none"  stroke-width="1px" opacity="1" ></path>';
svgid.insertAdjacentHTML('beforeend',data);

<div style="height:330px; width:1100px; background:#313131; margin:0 auto; ">
    <svg id='svg_main' height="330" width="1100"></svg>
</div>

Answer 2

Please replace the following:

svgid.insertAdjacentHTML('beforeend', data);

with the following:

console.log('SVG\'s NS before insertion: ' + svgid.namespaceURI);
svgid.insertAdjacentHTML('beforeend', data);
console.log('SVG\'s NS after insertion: ' + svgid.namespaceURI);
pathEl = document.getElementById('lineAB');
console.log('PATH\'s NS (after insertion): ' + pathEl.namespaceURI);

Try it with Firefox 35 or below. This is to see what the namespace of the SVG element is before and after the call to insertAdjacentHTML and what the namespace of the PATH element is, after it has been inserted.

You could also try this JSFiddle, which contains the modification suggested above.

What you encounter is related to this bug report. The fix for this bug landed on Firefox 36. Up to and excluding Firefox 36, messing with the inner HTML of an SVG element would not respect the element's deduced svg namespace and elements inserted would belong to the xhtml namespace. Regarded, then, as an HTML element, PATH element #lineAB would make no sense and would, thus, disappear from the page. But (here is my speculation), since the inserted PATH element's namespace (xhtml) does not appear in the DOM, it would not be saved when saving the page. So, when opening the saved page, the PATH element's namespace would be correctly deduced (possibly inheriting from the SVG element), resulting in the SVG appearing as it should.

A duplicate of the bug report mentioned above is this bug report and is provided here for more insight.

I tried the approach suggested above in a commercial cross-browser testing platform using Vista and Firefox 35 (I too like to live dangerously) and the console log was svg/svg/xhtml. Using Firefox 36 the console log was svg/svg/svg.

What works in Firefox 35 for appending the PATH to the SVG is this:

var svgid = document.getElementById('svg_main');
var str_lne = 60;
var pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathEl.setAttribute('id', 'lineAB');
pathEl.setAttribute('d', 'M 50 ' + str_lne + ' L 1050 ' + str_lne);
pathEl.setAttribute('transform', 'translate(0.5,0.5)');
pathEl.style.stroke = '#707073';
pathEl.style.strokeWidth = '1px';
svgid.appendChild(pathEl);

JSFiddle here. That is, create your elements explicity and do not insert HTML directly.

The million dollar question now. Why do you care about Firefox 35 or below?