nicht angemeldet
Rolf B
Rolf B
Rolf B
Rolf B
Matthias Scharwies
Rolf B
Rolf B
Gunnar Bittersmann
MudGuard
klawischnigg
Hallo Forum,
seit Firefox Update auf 131.0 habe ich ein Darstellungsproblem mit meinen SVG Grafiken.
Entweder werden sie gar nicht dargestellt oder aber - wenn sie dargestellt werden - verschwinden sie bei mouse-over.
Dieses Verhalten zeigt kein anderer Browser und auch FF hat das bis zur Version 131.0 nicht gezeigt.
Ich bin grad etwas ratlos, wo ich beim debuggen ansetzen soll.
Meine SVG-Grafiken setze ich z.b. wie folgt ein:
<a class="tooltip" title='Eintrag ändern'
HREF="aendern.php?ID=466">
<svg class='aktiv_icon20 calculate' viewBox='0 0 1 1'>
<use href='./icons.svg#calculate'/>
</svg>
</a>
Das hierzu gehörige CSS:
.aktiv_icon20 {
vertical-align:-0.2em;
width: 16px;
text-align:center;
padding: 5px 5px 5px;
margin-right: 4px;
font-size: 16px;
color: #2E2E2E;
border: 1px solid #C0C0C0;
}
svg.calculate {
background: rgb(90, 90, 173, .15);
color: #000;
}
Hat jemand von Euch eine Idee, wo ich ansetzen kann, um bei diesem Problem einen Fuß in die Tür zu bekommen?
Jens
Hallo Jens,
grundsätzlich funktioniert das Referenzieren auf ein Symbol in einem externen SVG mit Firefox und auch mit Chromium.
Wenn es bei Dir nicht funktioniert, liegt es nicht an dem, was Du zeigst.
Was mir auffällt: Die Schreibung der ID ist in Chromia case-insensitive. In Firefox hingegen case-sensitive. Heißt das Icon im icon.scg bei Dir vielleicht "Calculate" statt "calculate"?
Ob das im FF früher mal insensitive war, weiß ich nicht, habe keinen da.
Rolf
Hallo Rolf,
Du hast recht, ich habe gerade vor 2 Minuten herausgefunden, dass es an Code liegt, der Euch nicht vorliegt:
svg:hover {
transform: scale(1.2); /* Zoomstufe */
transition: transform 0.2s; /* Füge eine sanfte Übergangsanimation hinzu */
}
Hier mal als komplette html-datei:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Test</title>
<style>
.aktiv_icon20 {
vertical-align: -0.2em;
width: 16px;
text-align: center;
padding: 5px 5px 5px;
margin-right: 4px;
font-size: 16px;
color: #2E2E2E;
border: 1px solid #C0C0C0;
}
svg.calculate {
background: rgb(90, 90, 173, .15);
color: #000;
}
svg:hover {
transform: scale(1.2); /* Zoomstufe */
transition: transform 0.2s; /* Füge eine sanfte Übergangsanimation hinzu */
}
</style>
</head>
<body>
<a class="tooltip" title='Eintrag ändern' href="aendern.php?ID=466">
<svg class='aktiv_icon20 calculate' viewBox='0 0 1 1'>
<use href='./icons.svg#calculate'></use>
</svg>
</a>
</body>
</html>
Jedwede Scalierung bringt das SVG zum Verschwinden in FF 131 und auch im 132(beta).
Jens
svg:hover { transform: scale(1.2); /* Zoomstufe */ transition: transform 0.2s; /* Füge eine sanfte Übergangsanimation hinzu */ }
So hingegen scheint es zu funktionieren.
svg {
will-change: transform; /* Nur die transform-Eigenschaft angeben */
}
svg:hover {
transform: scale(1.2); /* Vergrößern beim Hover */
transition: transform 0.2s; /* Sanfte Übergangsanimation */
}
So hingegen scheint es zu funktionieren.
Scheint...
Weiß nicht, wo ich ansetzen soll...
Für ideen bin ich dankbar.
Hallo Jens,
nein, bei mir funktioniert die Skalierung auch ohne will-change (was eigentlich nur für Performance-Optimierungen gedacht ist). Das muss was anderes sein.
Hast Du schon mal in den Entwickler-Tools den Hover-Zustand für das SVG manuell gesetzt und dann analysiert, was das alles auslöst?
Hat das a-Element oder seine Eltern-Elemente ggf. auch noch :hover-Aktionen?
Nach einem Online-Beispiel, das den Fehler zeigt, trau ich mich ja gar nicht zu fragen 😉. Aber das wär richtig schön. Vor allem würdest Du beim Erstellen des Online-Beispiels möglicherweise merken, dass der Fehler nicht im gezeigten Code verursacht wird…
Rolf
Hallo Rolf,
Nach einem Online-Beispiel, das den Fehler zeigt, trau ich mich ja gar nicht zu fragen 😉. Aber das wär richtig schön. Vor allem würdest Du beim Erstellen des Online-Beispiels möglicherweise merken, dass der Fehler nicht im gezeigten Code verursacht wird…
Schau mal.
Und das bei diesem Quelltext:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Test</title>
<style>
.aktiv_icon20 {
vertical-align: -0.2em;
width: 16px;
text-align: center;
padding: 5px 5px 5px;
margin-right: 4px;
font-size: 16px;
color: #2E2E2E;
border: 1px solid #C0C0C0;
}
svg.calculate {
background: rgb(90, 90, 173, .15);
color: #000;
}
svg:hover {
transform: scale(1.2); /* Zoomstufe */
transition: transform 0.2s; /* Füge eine sanfte Übergangsanimation hinzu */
}
</style>
</head>
<body>
<a class="tooltip" title='Eintrag ändern' href="aendern.php?ID=466">
<svg class='aktiv_icon20 calculate' viewBox='0 0 1 1'>
<use href='./icons.svg#calculate'></use>
</svg>
</a>
</body>
</html>
Und meine icons.svg
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id='calculate' fill='currentColor' viewBox='0 0 256 256'>
<path fill="currentColor"
d="M176 58H80a6 6 0 0 0-6 6v48a6 6 0 0 0 6 6h96a6 6 0 0 0 6-6V64a6 6 0 0 0-6-6Zm-6 48H86V70h84Zm30-80H56a14 14 0 0 0-14 14v176a14 14 0 0 0 14 14h144a14 14 0 0 0 14-14V40a14 14 0 0 0-14-14Zm2 190a2 2 0 0 1-2 2H56a2 2 0 0 1-2-2V40a2 2 0 0 1 2-2h144a2 2 0 0 1 2 2Zm-64-68a10 10 0 1 1-10-10a10 10 0 0 1 10 10Zm0 40a10 10 0 1 1-10-10a10 10 0 0 1 10 10Zm-40-40a10 10 0 1 1-10-10a10 10 0 0 1 10 10Zm0 40a10 10 0 1 1-10-10a10 10 0 0 1 10 10Zm80-40a10 10 0 1 1-10-10a10 10 0 0 1 10 10Zm0 40a10 10 0 1 1-10-10a10 10 0 0 1 10 10Z"/>
</symbol>
<symbol id='locked' fill='currentColor' viewBox='0 0 256 256'>
<path fill="currentColor"
d="M128 116a24 24 0 0 0-4 47.7V184a4 4 0 0 0 8 0v-20.3a24 24 0 0 0-4-47.7Zm0 40a16 16 0 1 1 16-16a16 16 0 0 1-16 16Zm80-72h-40V52a40 40 0 0 0-80 0v32H48a12 12 0 0 0-12 12v112a12 12 0 0 0 12 12h160a12 12 0 0 0 12-12V96a12 12 0 0 0-12-12ZM96 52a32 32 0 0 1 64 0v32H96Zm116 156a4 4 0 0 1-4 4H48a4 4 0 0 1-4-4V96a4 4 0 0 1 4-4h160a4 4 0 0 1 4 4Z"/>
</symbol>
</defs>
</svg>
Hilft das beim Einschätzen oder Nachbauen?
Gruß, Jens
Hallo Jens,
okay, der Fehler tritt im FF131 auf, im Chrome 129 nicht.
Hold my 🍺
Rolf
Hallo Rolf,
okay, der Fehler tritt im FF131 auf, im Chrome 129 nicht.
Jaja.
Im Edge auch nicht, selbst im FF < 131 nicht.
Jens
Hallo Jens,
es sieht nach Rundungsfehlern im Firefox aus. Dein Icon ist extrem filigran, es ist kleinteilig in einer 256×256 Viewbox gezeichnet und demnach auch 256×256 SVG-Einheiten groß.
Diese setzt Du dann in ein 16px×16px großes SVG mit einer Viewbox-Größe von 1×1 ein. D.h. zuerst muss er das Symbol mit Faktor 1/256 verkleinern, dann mit Faktor 16 wieder vergrößern. DARAUF wird dann noch die 3D Transformationsmatrix für den scale angewendet. Schlaue SVG Renderer merken sowas und kürzen den Faktor direkt, dumme Renderer machen das Schritt für Schritt und runden bei jedem Schritt. Keine Ahnung, wie dumm oder schlau FF und Chromium sind, aber einer ist dümmer, oder ungeschickter, oder buggy, denn beim FF rundet er irgendwas auf 0.
Wenn Du hingegen die Viewbox des Icons auf 16×16 setzt, skaliert er nur um 16/256 = 1/16. Und das funktioniert. Bei mir. Alles nur eine Frage der Koordinatenrundung.
FF und Grafikkarte sind kein gutes Gespann. Dieser HSL-Farbwähler hat im FF auch nicht funktioniert, die Farben waren kaputt. Das hab ich als Bug gemeldet und den Farbwähler als Beispiel mitgegeben, und 3 Versionen später hat es funktioniert.
Ich würde sagen: schick ihnen dein Beispiel und beschwere Dich. Das kannst Du hier tun. Aber mit einer angepassten Viewbox hast Du ja auch einen brauchbaren Workaround.
Rolf
Hallo Rolf,
Wenn Du hingegen die Viewbox des Icons auf 16×16 setzt, skaliert er nur um 16/256 = 1/16. Und das funktioniert. Bei mir. Alles nur eine Frage der Koordinatenrundung.
Das zerhaut zwar meine Grafik, aber die verschwindet dann trotzdem beim hovern. 😬
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id='calculate' fill='currentColor' viewBox='0 0 16 16'>
<path fill="currentColor"
d="M11 3.625H5a1 1 0 0 0-1 1v4a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.625a1 1 0 0 0-1-1Zm-1 4.5H6V5.125h4Zm8-9H1A1 1 0 0 0 0 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1ZM15 15a.5.5 0 0 1-.5.5H1A.5.5 0 0 1 0 15V1a.5.5 0 0 1 .5-.5h14a.5.5 0 0 1 .5.5Zm-6-5a1 1 0 1 1-1-1a1 1 0 0 1 1 1Zm0 4a1 1 0 1 1-1-1a1 1 0 0 1 1 1Zm-4-4a1 1 0 1 1-1-1a1 1 0 0 1 1 1Zm0 4a1 1 0 1 1-1-1a1 1 0 0 1 1 1Zm8-4a1 1 0 1 1-1-1a1 1 0 0 1 1 1Zm0 4a1 1 0 1 1-1-1a1 1 0 0 1 1 1Z"/>
</symbol>
<symbol id='locked' fill='currentColor' viewBox='0 0 16 16'>
<path fill="currentColor"
d="M8 7a1 1 0 0 0-1 1v3a.5.5 0 0 0 1 0v-3a1 1 0 0 0-1-1Zm0-3a2 2 0 0 1 2 2v1h-4V6a2 2 0 0 1 2-2Zm8 3H4V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2Zm0 8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v8Z"/>
</symbol>
</defs>
</svg>
Ich würde sagen: schick ihnen dein Beispiel und beschwere Dich. Das kannst Du hier tun. Aber mit einer angepassten Viewbox hast Du ja auch einen brauchbaren Workaround.
Das habe ich bereits gemacht.
Gruß, Jens
Servus!
Hallo Jens,
es sieht nach Rundungsfehlern im Firefox aus.
Das müsste auch ins Wiki.
Evtl. hier (SVG/Tutorials/Icons) und in den viewBox-Artikel.
Einen solchen Effekt kann man auch bei der - hoffentlich bald obsoleten - png-Vorschau beim Hochladen von SVG ins Wiki beobachten: Bilder mit kleiner viewBox werden unscharf.
Herzliche Grüße
Matthias Scharwies
Hallo Matthias,
Das müsste auch ins Wiki
Delegationsauftrag an außerhalb des Vorstands 😉
Rolf
Wenn Du hingegen die Viewbox des Icons auf 16×16 setzt, skaliert er nur um 16/256 = 1/16. Und das funktioniert. Bei mir. Alles nur eine Frage der Koordinatenrundung.
Wenn Du hingegen das hier meintest, das funktioniert (unveränderte icons.svg) und ändern der viewbox auf width/hight:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG Test</title>
<style>
.aktiv_icon20 {
vertical-align: -0.2em;
width: 16px;
text-align: center;
padding: 5px 5px 5px;
margin-right: 4px;
font-size: 16px;
color: #2E2E2E;
border: 1px solid #C0C0C0;
}
svg.calculate {
background: rgb(90, 90, 173, .15);
color: #000;
}
svg:hover {
transform: scale(1.2); /* Zoomstufe */
transition: transform 0.2s; /* Füge eine sanfte Übergangsanimation hinzu */
}
</style>
</head>
<body>
<a class="tooltip" title='Eintrag ändern' href="aendern.php?ID=466">
<svg class='aktiv_icon20 calculate' viewBox='0 0 1 1'>
<use href='./icons.svg#calculate'></use>
</svg>
</a>
<a class="tooltip" title='Eintrag ändern' href="aendern.php?ID=466">
<svg class='aktiv_icon20 calculate' width='16' height='16'>
<use href='./icons.svg#calculate'></use>
</svg>
</a>
</body>
</html>
Das erzeugt eine Grafik, die beim hovern verschwindet und eine, die bleibt.
Jens
Hallo Jens,
Ich meinte die Viewbox des SVG, das den use enthält.
<svg class='aktiv_icon20 calculate' viewBox='0 0 16 16'>
<use href='./icons.svg#calculate'></use>
</svg>
Alles andere kann bleiben. Wenn du viewBox ganz weglässt und statt dessen width/height setzt, könnte das eine Defaultviewbox dieser Größe erzeugen, das aus ich gerade nicht auswendig.
Rolf
Hallo Rolf,
Ich meinte die Viewbox des SVG, das den use enthält.
<svg class='aktiv_icon20 calculate' viewBox='0 0 16 16'> <use href='./icons.svg#calculate'></use> </svg>
Nein, das hat bei mir gar nichts geändert (außer, dass das SVG nicht mehr als die Grafik erkennbar ist, die ich anzeigen wollte)
Durch Ändern von viewBox='0 0 1 1' in width='16' height='16' werden 2 SVG generiert. Eines ist nach dem Mouseover unsichtbar, das andere bleibt sichtbar.
Gruß, Jens
Hi,
seit Firefox Update auf 131.0 habe ich ein Darstellungsproblem mit meinen SVG Grafiken.
nur mit Deinen? Oder gibt's das Phänomen auch bei anderen Seiten?
cu,
Andreas a/k/a MudGuard
Hi there,
seit Firefox Update auf 131.0 habe ich ein Darstellungsproblem mit meinen SVG Grafiken.
Entweder werden sie gar nicht dargestellt oder aber - wenn sie dargestellt werden - verschwinden sie bei mouse-over.
Ist wahrscheinlich wenig hilfreich, aber ich hab heute auf 131.0 upgedatet und kann Dein Problem nicht nachvollziehen. Scheint also nicht jeden FF zu betreffen oder vielleicht nur bestimmte Betriebssysteme. Mein FF rennt unter Linux Mint 21irgendwas...