Sobald wir das haben, was wir unseren "Defs-Block" von SVG nennen - diesen Teil von SVG, der alle Dinge definiert, die wir später zeichnen möchten - wo legen wir ihn ab? Bisher haben wir es direkt in den HTML-Code eingefügt, und das funktioniert absolut. Wenn wir es oben auf der Seite belassen, sagen Sie kurz nach dem Eröffnungs- Tag:
Das funktioniert in allen Browsern, die SVG unterstützen, hervorragend.
Es könnte verlockend sein, dies nach unten zu verschieben. Möglicherweise sind die Symbole für die Seite nicht besonders wichtig, nicht so wichtig wie der tatsächliche Inhalt, den die Seite liefern soll. Daher verschieben wir die Symbole stattdessen an den unteren Rand der Seite und verschieben das Laden, wie dies häufig bei JavaScript der Fall ist. Wir versuchen dies im Video, haben jedoch Probleme mit Safari beim Rendern der Symbole, die wir später überhaupt versucht haben . Um ehrlich zu sein, habe ich auch in anderen Browsern inkonsistentes Verhalten oder verschiedene Typen gesehen, und es scheint, dass sich die Landschaft in dieser Hinsicht etwas verändert. Also habe ich gehört: ist eine schwierige Sache zu implementieren. Am sichersten ist es, den Block oben zu platzieren, wenn Sie die Defs in Ihren Dokumenten behalten.
In diesem Video sehen wir uns einige grundlegende Tests all dessen an und dann einige reale Websites, die dieses System verwenden, und wie / wo sie den Block svg defs einfügen.
Siehe den Stift 954e71cb5d5e79fb61d3c89bb3f21b8a von Chris Coyier (@chriscoyier) auf CodePen.
Hinweis
Ich mag den Begriff "SVG defs block" - nur damit wir ihn etwas nennen können, das einen bestimmten Zweck hat, aber keinen offiziellen Namen hat. Sie müssen jedoch nicht immer ein Tag verwenden. Wenn Sie s verwenden, rendern diese sowieso nicht von alleine, und ich glaube nicht, dass sie innerhalb sein sollen . Ich habe gehört, dass die Definitionen von Verläufen in SVG gleich sind und nicht einmal funktionieren, wenn sie sich in der befinden . Unabhängig davon ist es immer noch ein "Block von SVG-Code, den wir nur definieren, um ihn später zu verwenden", daher werde ich ihn wahrscheinlich weiterhin als "SVG-Defs-Block" bezeichnen.