I've embedded some SVG in HTML, using only JS to get initialise it.
It works ONLY in Opera.

I have two problems:
(1) Why only in Opera?
(2) How to dispense with the HTML, keeping only the JS which generates the SVG.

Here's the HTML:


Here's the external JS :


Hoping for answers,
Thanks,
JJ

Hi, again, Should I say more?
Lets forget about the non-Opera failures,
though I'm disappointed with Firefox.

But Question 2 is what really bothers me.
I'm building a simple block of buttons, within a frame, within a frame, within a frame.

The key point is I'm trying to use SVG without embedding it in HTML.
Moreover, I'm building the SVG indirectly, using only JS.

<svg onload="init();">
<script>
function init() { ...}
</script>
</svg>

I have now embedded 'svg.js' within 'test.html'
to make it more comparable with 'test.svg'.

They both hold virtually identical javascript.
The only real difference is that the JS in the HTML
needs to initiate SVG (function initSVG().

Both scripts contain an onload function init(),
which starts things off, and then calls
function doBox(...) 6 times,
building 3 buttons, nested within 3 containers.

In Opera, test.html works perfectly, but test.svg fails when
it tries to append the first container to the parent svg.
Alerts tell me that the parent svg object,
within test.html is svg = [object SVGSVGElement],
but within test.svg it is svg = [object SVGDocument].

I'm sure that should be telling me something.
Is there something wrong with init(evt) within test.svg :
if ( window.SVGDocument == null )
{ svg = evt.target.ownerDocument; }

Here is the HTML

And here the problem SVG

Does anyone know how I should address the parent svg
from within the embedded JS ?

I've just spotted a missing semicolon in line 10
of both test.html and test.svg.
var g1, g2, g3; // wrap, main, cont
That's not the problem. It was correct in both originals.

Here I am again, for the fourth time !
Just another footnote:

I looked again at the article by Jonathan Watt on
'SVG Authoring Guidelines' which covers SVG and DOCTYPES
(among other things) v. https://jwatt.org/svg/authoring/.

At the end he recommended what I thought might be useful:
property = evt.target.ownerDocument.documentElement;
Sure enough, it produced svg = [object SVGSVGElement].

Not that that made any difference. test.svg still fails.

Hi JJ,
I'm sorry no one has replied. I guess no one here must know the solution. I wish I could help, but SVG and JS are both over my head. But I wanted to suggest that you might try the mailing list or the IRC channel, which I have the impression are visited by more higher level users (coding etc.) and developers than this forum. You should be able to find the addresses at Inkscape.org

SUCCESS !, well partly !
Thanks, Brynn, for your suggestions.

I've succeeded in my challenge :
to code SVG with ALL the SVG instructions
simplified within contained javascript.
Isn't that the essence of a SVG framework ?
Isn't that the secret of Pergola?
Someone put me wise !

I think I've removed all my typos from test.svg.
Now, test.html and test.svg are almost identical.
Test.html needs an extra function: initSVG().
Function init() starts slightly differently in the two.

Both test.html and test.svg work in Opera
Still no luck with either in Firefox.
But that is Mozilla's problem, not Inkscape's.

By the way, my SVG never produces anything in Inkscape.
What am I doing that's wrong.

When I'm testing in Firefox I have noticed
a tiny strange 'inverse T' (or alt 193, in some fonts).
In test.html output, it is at about 50,15px
In test.svg it occurs at about 50,5px.


These are the two versions :