2016-09-12 2 views
1

Ich stieß auf einen Fehler in Internet Explorer 11, wo ein Marker-Pfad immer noch sichtbar ist, auch wenn ein äußeres Element das Attribut overflow: hidden hat.IE Fehler: SVG-Markierung sichtbar außerhalb des Ansichtsfensters

Hier ist ein example of the described problem (Bedarf in IE11 zu betracht)

Hier ist das Codebeispiel:

<!DOCTYPE html> 
<html> 
    <head></head> 
    <body> 
    <div style="width: 440px; height: 495px; overflow:hidden; border: 1px solid red"> 
    <svg> 
     <g transform="translate(413.209 51.1721) scale(0.514057)"> 
     <defs><marker id="end" viewBox="0 0 10 10" refX="0" refY="5" markerUnits="userSpaceOnUse" markerWidth="10" markerHeight="10" fill-opacity="1" fill="#888" orient="auto" class="arrowhead"><path d="M 0 0 L 10 5 L 0 10 z"></path></marker></defs>   
     <path marker-end="url(#end)" style="fill:transparent; opacity: 1; stroke: #000; stroke-opacity: 1;" d="M323.921875,-19.2421875H-465.20818355008544V961.2877197265625H-465.20818355008544V981.2877197265625"></path> 
     </g> 
    </svg> 
    </div> 
    </body> 
</html> 

Bild des Problems:

the red border is the outer div which has overflow:hidden

Was ich erwartet habe ist, dass der Marker auch versteckt ist. Hat jemand schon einmal das Gleiche erlebt?

Irgendwie tritt dies nur auf, wenn ein Zoom größer oder kleiner als 100% verwendet wird.

Antwort

0

Ich kam in dem folgenden Artikel über ein ähnliches Problem auf css3 Transformationen und Überlauf: versteckt:

https://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/

gab es den Vorschlag zu verwenden:

svg { opacity: 0.99; } 

Dies löst das Problem.

Der Grund, warum dies funktioniert, hängt möglicherweise damit zusammen, wie der Z-Index funktioniert. Eine gute lesen zu diesem Thema finden Sie hier: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Verwandte Themen