Ich habe ein 3-bar-Icon mit reinem SVG -Code in HTML entworfen. Ich benutze CSS3-Transformationen, um den oberen & amp; untere Balken in eine X-Form. Das Problem ist, dass sie sich um ihr eigenes Zentrum drehen, aber ich muss sie um das Zentrum des Symbols drehen. Um das zu umgehen, habe ich ihre X / Y-Koordinaten angepasst.
Dies verursacht eine Menge Buggy-Probleme mit Internet Explorer, Firefox, & amp; Safari. Chrome scheint in Ordnung zu sein, aber natürlich möchte ich das "richtig" kodieren, damit es in allen Browsern funktioniert.
HTML
%Vor%CSS
%Vor%JS
%Vor%Ich denke auch, dass das Ändern der X / Y-Koordinaten einen verschwommenen Effekt verursacht. Ich habe unten einen Screenshot hinzugefügt. Zuerst sehen Sie das abgeschlossene X-Symbol und dann sehen Sie, wie es aussieht, wenn es auf Standard zurückgesetzt wird.
Die Balken sind nicht perfekt gerade, aber sie sehen aus irgendeinem Grund schief aus.
Ich bin immer noch neu in der SVG-Manipulation, also bin ich mir nicht sicher, wie man <rect> -Elemente richtig mit CSS3 / JS dreht. Jede Hilfe oder Tipps in die richtige Richtung wäre mehr als geschätzt.
Sie können die JS-Positionierung mithilfe der CSS-Eigenschaft transform-origin . Sie können es links vom ersten und zweiten Balken mit transform-origin: 0 50%; setzen.
Auf diese Weise werden sie einander kreuzen, wenn sie gedreht werden:
Dank an David Thomas für die JS
Beachten Sie, dass die Eigenschaft transform-origin dieselbe Herstellervorwahl wie die Eigenschaft transform benötigt. Ich habe sie für beide im obigen Ausschnitt weggelassen
Tags und Links javascript jquery svg css3 css-transforms
