nicht angemeldet
SVG: Symbol auf absolute Grösse skalieren.
Gunnar Bittersmann
Matthias ApselHallo,
ein kompliziertes SVG-Logo besteht aus vielen einzelnen Elementen, so dass ich die genaue Abmessungen des Gesamtelements nicht auf einen Blick erkennen kann.
Ich möchte das Logo als Symbol verpacken und mehrfach in der SVG-Datei nutzen. Dabei will ich es auf verschiedene absolute Grössen (z.B. 3mmm) skalieren.
Wie mache ich das?
-
Lieber Orgelfan,
ein kompliziertes SVG-Logo besteht aus vielen einzelnen Elementen,
geht es um "Sprites", die in einer SVG-Datei zusammengefasst sind, oder geht es um ein Logo, das immer komplett angezeigt werden soll?
so dass ich die genaue Abmessungen des Gesamtelements nicht auf einen Blick erkennen kann.
Die Abmessungen muss der Browser handhaben, nicht Du selbst. Daher kannst Du mit CSS dafür sorgen, dass das Element, dessen Hintergrundbild mit dem Logo gestaltet werden soll, mit der
background-size-Regel entsprechend skaliert wird.Ich möchte das Logo als Symbol verpacken und mehrfach in der SVG-Datei nutzen.
Diesen Satz verstehe ich nicht.
Dabei will ich es auf verschiedene absolute Grössen (z.B. 3mmm) skalieren.
Warum nennst Du als Einheit Millimeter? Nutzt Du es für Druckausgaben? Das hast Du nicht näher erläutert. Erzähle doch bitte mal wesentlich genauer, was Du vorhast!
Liebe Grüße
Felix Riesterer
-
@@Orgelfan
Ich möchte das Logo als Symbol verpacken und mehrfach in der SVG-Datei nutzen. Dabei will ich es auf verschiedene absolute Grössen (z.B. 3mmm) skalieren.
Wie mache ich das?
Vermutlich so: Du änderst
<svgin<symbol id="…"und</svg>in</symbol>. DasviewBox-Attribut muss erhalten bleiben – wenn keins da ist, eins setzen. Andere möglicherweise vorhandene Attribute wiexmlns,widthundheightfallen weg.Das
symbol-Element bindest du in einsvg-Element ein und kannst dann mit<use xlink:href="#…"/>darauf zugreifen.LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Das Logo soll später mehrmals in verschiedenen Grössen auf einer DinA4-Seite genau positioniert ausgedruckt werden.
Das viewbox-attribut funktioniert vermutlich nicht, denn es ist ja nicht mit "use" verwendbar, und würde ja auch nicht skalieren wenn ich das richtig verstehe, sondern allenfalls den sichtbaren Bereich beschneiden?
Oder kann man "viewbox" mit jedem "<use ..." -Aufruf verwenden?
-
@@Orgelfan
Das Logo soll später mehrmals in verschiedenen Grössen auf einer DinA4-Seite genau positioniert ausgedruckt werden.
Das viewbox-attribut funktioniert vermutlich nicht, denn es ist ja nicht mit "use" verwendbar
Was meinst du mit „nicht mit
useverwendbar“? Dasviewbox-Attribut hängt nicht amuse-Element, sondern amsymbol-Element.und würde ja auch nicht skalieren wenn ich das richtig verstehe, sondern allenfalls den sichtbaren Bereich beschneiden?
Das verstehst du nicht richtig.
Vielleicht kannst du mit dem ersten Teil des Tutorials was anfangen.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Wenn ich dem <symbol ..> eine viewbox hinzufüge ist es doch immer gleich gross.
Ich will es aber später mit <use ..> ca. 20x aufrufen und dabei immer verschieden skalieren, - aber auf absolute Grössen.
-
@@Orgelfan
Wenn ich dem <symbol ..> eine viewbox hinzufüge ist es doch immer gleich gross.
Nein.
viewBoxgibt keine Größe an, sondern das Koordinatensystem.LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
@@Gunnar Bittersmann
Wenn ich dem <symbol ..> eine viewbox hinzufüge ist es doch immer gleich gross.
Nein.
viewBoxgibt keine Größe an, sondern das Koordinatensystem.Ich hab dir mal ein Beispiel gebaut, in welchem dasselbe
symbolzweimal in unterschiedlichen Größen verwendet wird.Die Angaben im
d-Attribut despath-Elements dessymbols beziehen sich auf dessen Koordinatensystem (d.h. dessenviewBox).Die Angaben für
x,y,width,heightbei denuse-Elementen beziehen sich auf das Koordinatensystem dessvg-Elements (d.h. dessenviewBox).LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling-
Guck ich mir mal an.
Was ich nicht ganz verstehe: In der Selfhtml-Erklärung zur viewbox steht, dass sich ab der Definition einer viewbox in einem symbol alles Nachfolgende im kompletten(!) svg auf diese viewbox bezieht. Wie geht das wenn ich wie in Deinem Beispiel zwei viewboxen habe?
-
Hallo Orgelfan,
Was ich nicht ganz verstehe: In der Selfhtml-Erklärung zur viewbox steht, dass sich ab der Definition einer viewbox in einem symbol alles Nachfolgende im kompletten(!) svg auf diese viewbox bezieht. Wie geht das wenn ich wie in Deinem Beispiel zwei viewboxen habe?
Ein svg-Element kann nur ein viewBox-Attribut haben.
Bis demnächst
Matthias--
Pantoffeltierchen haben keine Hobbys.
¯\_(ツ)_/¯
-
-
-
-
-
-
-