SVG JavaScript TypeError

programming
1

So I’ve made a little game that works as planned as a normal web page (see the CodePen here)

But, when I put it into a local server WordPress page I get this error and nothing works:
TypeError: undefined is not an object (evaluating 'p0.cx.baseVal')

The error references line 55 in the JS part of the Pen. I’m stumped.

FYI is that I’m using the WP Scripts n Styles plug-in on the WP site. I’ve done other pages there using the same library (plain draggable) and those seem to work well.

While I can pull the game in via an iFrame (which does work), I’d prefer not to.

2

Using the Dev Tools console on your WordPress page, does p0 actually evaluate to anything? My guess is no, but I wanted to confirm :slight_smile:

3

No.
But it seems that WP is adding <br /> tags to the SVG element.

4

WP adds paragraph and break tags to the text editor content. It does not seem to allow <svg> or its children.

So I went back to an iFrame but that ended up cutting off all the content outside the div that contained the svg elements.

However, I was able to use a template (document fragment) in the JavaScript code, appending that child to a div in the page:
let tpl = document.createElement('template'); tpl.innerHTML = '-all the html code goes here-'; document.getElementById('svg-outer').appendChild(tpl.content);

On resize this seems to work well but I’m still testing.

1 Like