it-swarm.com.de

Überlauf: Sichtbar auf SVG

Kann overflow: visible für <svg>-Elemente festgelegt werden?

Dieses einfache Beispiel für jsfiddle bricht in jedem Browser, auf den ich Zugriff habe (einige Versionen von Chrome und Firefox), da sie wie overflow: hidden wirken.

Kann mir jemand sagen, ob der svg-Support einfach noch zu unreif ist, um solche einfachen Dinge auszuführen, oder ob ich etwas falsch in meinem Code mache?

Meine praktische Anwendung von overflow: visible ist eine Bereichsachse in einer Grafik, bei der die untere Hälfte des -0-Ticks abgeschnitten wird.

24
Thomas Ahle

Ich gehe davon aus, dass Sie Inline-<svg> -Elemente in HTML bedeuten. Wenn ja, ist dies nur eine Einschränkung der Implementierung. IE9 + erlaubt overflow:visible für <svg> -Elemente, aber bisher haben die anderen Browser kein AFAIK.

Eine mögliche Problemumgehung (wie dies eigentlich in erster Linie geschehen soll, ist IMHO), indem Sie eine viewBox angeben, die das Koordinatensystem innerhalb der SVG definiert. Dann zeichnen Sie in dieses Koordinatensystem. Wenn Dinge abgeschnitten werden (oder mit anderen Worten, wenn sich die Elemente außerhalb des Bereichs viewBox befinden), erhöhen Sie einfach die Breite und/oder Höhe von viewBox.

Wenn Sie sich über einen guten Standard für Ihre viewBox wundern, versuchen Sie [0 0 width height] (wobei width und height die Größe Ihrer svg-Datei ist, die Sie gerade haben). Erhöhen Sie einfach die Höhe, bis der untere Tick vollständig sichtbar ist.

Update 2014: Es ist in Browsern immer noch ein bisschen inkonsistent, aber es kommt dorthin. Firefox und IE unterstützen overflow:visible für Inline-svg-Elemente, und Blink (Opera 23/Chrome 36) fügte auch Unterstützung hinzu, für Details siehe bugreport .

25
Erik Dahlström
overflow: visible  
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/

Hinzufügen eines großen Box-Schatten zum SVG oder Hinzufügen des SVG in einem DIV mit dem riesigen Schatten lösen Sie es. In Chrome ist mir aufgefallen, dass der Überlauf auf das Box-Shadow-Limit begrenzt wird.

0
Kim Sant