Cześć,
Mam problem z wyświetlaniem przycisku hamburgera w przeglądarce. Stworzyłem ikonkę, wyeksportowałem do SVG i próbuję wkleić kod SVG, żeby po najechaniu dało się animować w CSS.
<svg class="hamburger-button" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 30 18" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<rect y="0" width="30" height="2"/>
<rect class="hamburger-middle-line" y="8" width="30" height="2"/>
<rect y="16" width="30" height="2"/>
</svg>
.hamburger-button
{
pointer-events: auto;
cursor: pointer;
fill: #000;
height: 17px;
transition: width 1s;
}
Problem polega na tym, że środkowa linia (rect) wyświetla się źle. Poniżej wklejam screen dla zobrazowania problemu. Co ciekawe nie jest to kwestia tego, że jest inaczej stylizowana i posiada klasę "hamburger-middle-line", ponieważ usunięcie tej klasy nic nie zmienia.
Ikona w oryginalnym rozmiarze (screenshot):
Poniżej porównanie powiększenia (po lewej - powiększenie w przeglądarce przy pomocy CTRL+Scroll-up, po prawej - screenshot ikony w oryginalnym rozmiarze powiększonej w programie graficznym)
Proszę o podpowiedź gdzie może być problem i jak go rozwiązać.
