web-dev-qa-db-fra.com

Débordement: visible sur SVG

Est-il possible de définir overflow: visible sur des éléments <svg>?

Cet exemple simple sur jsfiddle marque une rupture dans tous les navigateurs auxquels j'ai accès (certaines versions de Chrome et Firefox) car ils se comportent comme overflow: hidden.

Quelqu'un peut-il me dire si le support de svg est simplement encore trop immature pour faire de telles choses simples, ou si je fais quelque chose de mal dans mon code?

Mon utilisation pratique de overflow: visible est un axe de plage sur un graphique, dans lequel la moitié inférieure de la coche -0 est coupée.

24
Thomas Ahle

Je suppose que vous entendez des éléments <svg> en ligne en HTML, le cas échéant, il ne s'agit que d'une limitation de la mise en œuvre. IE9 + autorise overflow:visible sur les éléments <svg>, mais jusqu'à présent, les autres navigateurs n'apprécient pas.

Une solution possible (ce qui est vraiment ce qu'il faut faire en premier lieu à mon humble avis) consiste à spécifier un viewBoxqui définit le système de coordonnées à l'intérieur du svg. Ensuite, vous dessinez des éléments dans ce système de coordonnées. Si des éléments sont coupés (ou si le ou les éléments se trouvent en dehors de la zone viewBoxname__), augmentez simplement la largeur et/ou la hauteur de viewBoxname__.

Si vous vous demandez quelle est la valeur par défaut pour votre viewBoxname__, essayez [0 0 width height] (où width et height correspondent à la taille de votre svg actuelle), puis augmentez simplement la hauteur jusqu'à ce que la coche inférieure soit entièrement visible.

Mise à jour 2014: Cela reste un peu incohérent d'un navigateur à l'autre, mais nous y arrivons. Firefox et IE prennent en charge overflow:visible sur les éléments svg en ligne, et Blink (Opera 23/Chrome 36) a également ajouté une prise en charge, pour plus de détails, voir - bugreport .

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

L'ajout d'une énorme boîte-ombre au SVG, ou l'ajout du SVG dans une DIV avec l'ombre énorme le résout. Dans Chrome, j’ai remarqué que le débordement est en train d’être coupé à la limite de la zone d’ombre.

0
Kim Sant