Ich sehe Beispiele für die Verwendung von SVG-Elementen in einem benutzerdefinierten Element (z. B. hier ), aber bis jetzt konnte ich noch nicht herausfinden, wie man ein benutzerdefiniertes Element definiert, das innerhalb eines SVG-Elements ist.
Ich habe Folgendes versucht, und während der Vorlageninhalt im Web-Inspektor angezeigt wird, wird der Kreis nicht visuell angezeigt.
%Vor%Gibt es einen Trick, um benutzerdefinierte Elemente in SVG-Elementen zu verwenden?
Leider können Sie das nicht tun. Elemente innerhalb des SVG-Namensraums müssen innerhalb von <svg> liegen. Wenn Sie <my-element> erstellen, wird ein benutzerdefiniertes Element erstellt, das von HTMLElement erbt.
Sie können jedoch <svg> in ein benutzerdefiniertes Element einfügen: Ссылка
Vergessen Sie auch nicht, dass benutzerdefinierte Elemente nicht selbstschließend sein können. In deinem Beispiel <my-element /> - & gt; %Code%. Dies liegt daran, dass die HTML-Spezifikation nur einige Elemente erlaubt, die sich selbst schließen.
Aktualisieren
Es ergibt sich, dass Sie ein benutzerdefiniertes Element in <my-element></<my-element> mit <svg> einbetten können.
Demo: Ссылка
%Vor% Die Polymer-FAQ zeigt, dass eine Vorlage in einem <svg> -Element verwendet werden kann:
In der Tat funktioniert das in Polymer 0.5! Aber es funktioniert nicht in Polymer 0.9 oder 1.0.
In der geänderten Syntax von Polymer 1.0 sieht es so aus:
%Vor%Das Element wird nicht gerendert und die Browserkonsole zeigt:
%Vor% Der Fehler bezieht sich auf die Funktion _parseNodeAnnotations() von Polymer.
Dass das FAQ-Beispiel in 0.5 funktioniert, zeigt, dass es keinen Grund gibt, warum SVG nicht grundsätzlich in Web Components oder Polymer funktionieren sollte. Das lässt mich hoffen, dass das Polymer-Team das bald regeln wird.
Laut diesem offenen Ticket ( Ссылка ) können Sie tatsächlich ein Vorlagenelement in einem SVG-Element verschachtelt haben . Der Fix, den ich unten verlinke, ist ein Port des Codes von 0.5. Das Problem wird hier und im offenen Ticket ausführlich beschrieben, sodass Sie es nicht erneut durchgehen müssen.
Wichtig:
Wenn Sie Google und dem Polymer-Team mitteilen möchten, dass dies tatsächlich ein wichtiges Feature ist, hinterlassen Sie bitte einen Kommentar zum Ticket.
Snippet: Ссылка
foo-svg.css
%Vor%foo-svg.html
%Vor%
foo-svg.js
%Vor%