Как встроить svg, используя Renderer2?

Question

[zlodiak]

Как в ангуляре встраивать в шаблон компонента svg средствами Renderer2?

Проблема в том, что встроенный таким образом svg не отображается в браузере, и вообще не виден в стилях инспектора: тут демо https://stackblitz.com/edit/angular-ccmzfx

В то же время, тот же самый svg, вставленный в шаблон руками, отображается без проблем. Это можно увидеть в том же примере.

Answer 1

[0xD34F]

При создании SVG элементов надо указывать пространство имён. Т.е., замените
this.renderer.createElement('svg');
на
this.renderer.createElement('svg', 'svg');

Ну и соответственно
this.renderer.createElement('circle');
на
this.renderer.createElement('circle', 'svg');

Comments

[zlodiak]

Спасибо, получилось. Но, если можно, хотелось бы понять суть явления. Дело в том, что когда я смотрю первый вариант моего кода, то в разметке вижу два абсолютно одинаковых куска html. Мне всегда казалось, что этого достаточно для отображения элементов, не использующих css...

[0xD34F]

zlodiak,

вижу два абсолютно одинаковых куска html

Не html, а svg. И вручную создавать svg элементы надо по-другому - для чего и указывается неймспейс. Нужны подробности - гугл к вашим услугам, сам я не в курсе, да и как-то малоинтересно.