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.
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 viewBox
qui 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 viewBox
name__), augmentez simplement la largeur et/ou la hauteur de viewBox
name__.
Si vous vous demandez quelle est la valeur par défaut pour votre viewBox
name__, 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 .
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.