[SOLVED] SVG path does not show

Add-ons Development
1

Hi!

I try to add SVG path to a element via JS file. It is added to HTML page, but does not show.

Screenshot from 2022-06-23 10-38-49
Screenshot from 2022-06-23 10-38-49624×136 22.4 KB

Screenshot from 2022-06-23 10-39-02
Screenshot from 2022-06-23 10-39-02414×246 8.82 KB

Screenshot from 2022-06-23 10-39-52
Screenshot from 2022-06-23 10-39-52690×246 23.9 KB

But if I go to Inspect menu to see SVG and:

  1. Copy svg’s external HTML
  2. Delete svg
  3. Paste svg
    Then it is show!

How to show it on normal work?

2

I don’t know the details but SVG is a special kind of XML document so you need to specify a namespace, so something like this should work:

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
3

No changes. Shows only after copy-paste in inspector.

4

I forgot to mention, all SVG parts must be created using the document.createElementNS('http://www.w3.org/2000/svg', ...
So also the path node:

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');

That really should work :slight_smile:.

1 Like
5

Wow! Thanks, it works now.

1 Like