# SVG JavaScript TypeError

**URL:** <https://forum.kirupa.com/t/svg-javascript-typeerror/639656>\
**Category:** programming\
**Created:** [April 14, 2019, 9:17pm UTC](https://forum.kirupa.com/t/svg-javascript-typeerror/639656 "2019-04-14T21:17:34Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [April 14, 2019, 9:17pm UTC](https://forum.kirupa.com/t/svg-javascript-typeerror/639656/1 "2019-04-14T21:17:34Z")

</div>

So I’ve made a little game that works as planned as a normal web page (see the CodePen [here](https://codepen.io/squinter/pen/VNMpgW))

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.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [April 16, 2019, 5:48am UTC](https://forum.kirupa.com/t/svg-javascript-typeerror/639656/2 "2019-04-16T05:48:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [April 16, 2019, 11:30am UTC](https://forum.kirupa.com/t/svg-javascript-typeerror/639656/3 "2019-04-16T11:30:14Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Squinter](https://avatars.discourse-cdn.com/v4/letter/s/d6d6ee/32.png) [@Squinter](https://forum.kirupa.com/u/Squinter)\
**Post date:** [April 16, 2019, 9:10pm UTC](https://forum.kirupa.com/t/svg-javascript-typeerror/639656/4 "2019-04-16T21:10:35Z")

</div>

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.