Przepełnienie: Widoczne na SVG

Czy można ustawić overflow: visible na elementach <svg>?Przepełnienie: Widoczne na SVG

This simple example on jsfiddle przerwy w każdej przeglądarce, do której mam dostęp (niektóre wersje przeglądarki Chrome i Firefox), ponieważ działają one jak overflow: hidden.

Czy ktoś może mi powiedzieć, czy wsparcie SVV jest po prostu zbyt niedojrzałe, aby robić takie proste rzeczy, czy też robię coś nie tak w moim kodzie?

Moje praktyczne zastosowanie overflow: visible jest osią zakresu na wykresie, na którym odcięto dolną połowę znacznika -0.

Źródło

2012-09-08 Thomas Ahle

Wygląda na to, że nie. Zobacz także http://stackoverflow.com/q/10077264/165673 – Yarin

teraz powyżej przykład działa (przynajmniej na 53 google chrome) –

Zakładam, że masz na myśli wbudowany < svg> elementy w HTML, jeśli tak, to jest to po prostu ograniczenie implementacji. IE9 + zezwala na overflow:visible na < svg> elementy, ale jak dotąd inne przeglądarki nie AFAIK.

Jednym z możliwych obejść (tak naprawdę powinno być zrobione w pierwszej kolejności IMHO) jest określenie viewBox, który definiuje układ współrzędnych wewnątrz svg. Potem rysujesz rzeczy wewnątrz tego układu współrzędnych. Jeśli coś zostanie przycięte (lub innymi słowy, jeśli element (y) znajdują się poza obszarem viewBox), zwiększ odpowiednio szerokość i/lub wysokość viewBox.

Jeśli zastanawiasz się nad dobrym domyślnym dla konkretnej viewBox, spróbuj [0 0 width height] (gdzie szerokość i wysokość jest wielkości twojego svg, które masz w tej chwili), a następnie po prostu zwiększ wysokość, aż dolny tyknięcie będzie w pełni widoczne.

Aktualizacja 2014: To wciąż jest trochę niespójne w różnych przeglądarkach, ale do tego dochodzi. Obsługa Firefoxa i IE overflow:visible na wbudowanych elementach svg oraz Blink (Opera 23/Chrome 36) również dodała obsługę dla niego, aby uzyskać szczegółowe informacje, patrz: bugreport.

Źródło

2012-09-08 13:15:56

Jeśli ustawię viewBox moje svg-elementy są skalowane, aby zmieściły się wewnątrz głównego elementu svg. Nadal nie przepełniają się. Po prostu powiększenie svg, aby pasowało do tego, co chcę przepełnić, przerwie układ html. –

Może naprawdę potrzebowałem wiedzieć, czy webkit obsługuje to, jeśli standard to określa i czy mam rację, że webkit używał go do obsługi? –

Ach, rozumiem, co masz teraz na myśli. Nie, będziesz musiał obejść brak wsparcia dla 'przepełnienia: widzialnego 'przez zwiększenie widoku (również rozmiaru svg). –

overflow: visible 
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/

Dodanie ogromnego pudełka-cienia do SVG lub dodanie SVG do DIV z ogromnym cieniem rozwiązać. W Chrome zauważyłem, że przepełnienie jest przycinane do limitu box-shadow.

Źródło

2017-06-19 08:28:17

Odpowiedz

Powiązane problemy