Ошибка при создании настраиваемого элемента, расширяющего SVGCircleElement - PullRequest
Новая
       20

Ошибка при создании настраиваемого элемента, расширяющего SVGCircleElement

0 голосов
/ 25 мая 2020

У меня есть следующий класс Node, который я использую для создания настраиваемого элемента node-element. 

class Node extends SVGCircleElement{
    static get observedAttributes() {
        return ["coordinates"];
      }
    constructor()
    {
        super();
        this.attributeMap = {coordinates:(coordinates)=>this.updateCoordinates(coordinates)}
    }
    connectedCallback(){
        this.initNode();
    }
    updateCoordinates(coordinates)
    {
        this.setAttribute("cx",`${coordinates.x}`);
        this.setAttribute("cy",`${coordinates.y}`);
        this.setAttribute("r",50);
    }
    initNode()
    {
        this.className="node";
    }
    attributeChangedCallback(name,oldValue,newValue)
    {
        if(oldValue!==newValue)
        {
            this.attributeMap[name](JSON.parse(newValue))
        }
    }
}

Я регистрирую этот элемент, используя: -

customElements.define('node-element',Node);

Я создаю этот элемент следующим образом: -

let newNode = document.createElement("node-element");

Здесь я получаю следующую ошибку: - 

Uncaught TypeError: Illegal constructor
    at new Node (index.js:9)
    at SVGSVGElement.drawNode (index.js:43)

Строка 43 соответствует код createElement.

1 Ответ

2 голосов
/ 25 мая 2020

Хотелось бы оказаться неправым, просто потратил 2 месяца на проект SVG

AFAIK, вы НЕ можете расширять элементы SVG

Вы можете создавать пользовательские элементы только в пространстве имен HTML http://www.w3.org/1999/xhtml

Элементы SVG находятся в пространстве имен SVG http://www.w3.org/2000/svg

Из документов: https://html.spec.whatwg.org/multipage/custom-elements.html#element -определение

Если интерфейс элемента для extends, а пространство имен HTML - HTMLUnknownElement, затем выбросить DOMException "NotSupportedError".

и

, если пространство имен не является пространством имен HTML, вернуть null

Текущий W3 C обсуждение разрешения других пространств имен находится здесь: https://github.com/w3c/webcomponents/issues/634

Пространство имен HTML также имеет ограничения

Apple / Safari реализовали Автономные настраиваемые элементы (наследуют от HTMLElement)

, но отказываются реализовать Настраиваемые встроенные элементы (расширяют любой встроенный элемент из пространства имен HTML)

Если вы хотите сгенерировать SVG, вам необходимо расширить HTMLElement и сгенерировать весь тег SVG: 

<svg xmlns='http://www.w3.org/2000/svg' viewBox='V'><circle cx='X' cy='Y' r='R'/></svg>

Соответствующий настраиваемый элемент SVG StackOverflow: вопросы и ответы

...