Sobald wir haben, was wir unseren „defs-Block“ von SVG nennen – jenen Teil von SVG, der all die Dinge definiert, die wir später zeichnen wollen –, wo platzieren wir ihn? Bisher haben wir ihn direkt in den HTML-Code eingefügt, und das funktioniert absolut. Wenn wir ihn am Anfang der Seite lassen, sagen wir direkt nach dem öffnenden <body>-Tag
</head>
<body>
<!-- include svg defs here -->Das funktioniert in allen Browsern, die SVG unterstützen, hervorragend.
Es mag verlockend sein, dies nach unten zu verschieben. Vielleicht sind die Icons nicht super wichtig für die Seite, nicht so wichtig wie der eigentliche Inhalt, den die Seite liefern soll, also verschieben wir die Icons stattdessen ans Ende der Seite und verzögern deren Laden, wie wir es oft mit JavaScript tun. Wir versuchen dies im Video, aber es gab Probleme mit Safari, das die Icons, die wir später zu <use> versucht haben zu verwenden, überhaupt nicht gerendert hat. Um ehrlich zu sein, habe ich auch in anderen Browsern inkonsistentes Verhalten oder verschiedene Typen festgestellt, wenn ich es auf diese Weise mache, und es scheint, dass sich die Landschaft in dieser Hinsicht etwas verschiebt. Ich habe also gehört: <use> ist eine schwierige Sache zu implementieren. Am sichersten ist es, den Block oben zu platzieren, wenn Sie die defs direkt in Ihren Dokumenten behalten.
In diesem Video sehen wir uns einige grundlegende Tests dazu an und werfen dann einen Blick auf einige reale Websites, die dieses System nutzen, und wie/wo sie den SVG-Defs-Block einfügen.
Siehe den Pen 954e71cb5d5e79fb61d3c89bb3f21b8a von Chris Coyier (@chriscoyier) auf CodePen.
Hinweis
Ich mag den Begriff „SVG defs block“ – damit wir ihn als etwas bezeichnen können, das einen bestimmten Zweck hat, aber keine offizielle Bezeichnung. Aber man muss nicht immer tatsächlich ein <defs>-Tag verwenden. Wenn Sie <symbol>s verwenden, werden diese sowieso nicht von allein gerendert, und ich glaube auch nicht, dass sie innerhalb von <defs> sein sollen. Ich habe gehört, dass Definitionen von Verläufen in SVG dasselbe sind und nicht einmal funktionieren, wenn sie sich in den <defs> befinden. Unabhängig davon ist es immer noch ein „Block SVG-Code, den wir einfach definieren, um ihn später zu verwenden“, daher werde ich ihn wahrscheinlich weiterhin als „SVG defs block“ bezeichnen.
Vielen Dank für diese! Es war super nützlich.
Ich hoffe, jemand kann mir zeigen, wo mein Fehler bei diesem kleinen Problem liegt, das ich habe.
Ich kann ein
<symbol>aus einer externen SVG nicht mit CSS vergrößern/verkleinern, aber ein anderes<symbol>aus derselben externen SVG schon.In CSS ändere ich
widthundheight. Was#plussproblemlos handhabt, während#heartes komplett ignoriert. Es behält einfach seine Größe von 24px * 24px bei, unabhängig von der CSS-Größenanpassung.Ich kann nicht erkennen, was ich anders mache. Kopfzerbrechend verwirrend!
Die externe icons-defs.svg-Datei
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="pluss" viewBox="0 0 24 24" aria-labeledby="title">
<title>Hinzufügen</title>
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
</symbol>
<symbol id="heart" viewbox="0 0 24 24" aria-labeledby="title">
<title>Favorit</title>
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
</symbol>
</svg>
Und in HTML
<button>
<svg class="icon-heart" role="presentation">
<use xlink:href="icons-defs.svg#heart"></use>
</svg>
Wie
</button>
<button>
<svg class="icon-pluss" role="presentation">
<use xlink:href="icons-defs.svg#pluss"></use>
</svg>
Ziel hinzufügen
</button>
Wenn dieselbe SVG mit Symbolen inline am Anfang des HTML-Dokuments vorhanden ist, funktioniert es einwandfrei.
Jeder Hinweis wäre sehr willkommen :)
Problem gelöst.
Ich hatte
viewboxbei#heartgeschrieben. Was HTML5 akzeptiert, aber XML nicht. Es mussviewBox(großes B) sein.