nicht angemeldet
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
Rolf B
Matthias Scharwies
Gunnar Bittersmann
MudGuard