CSS-Clip-Pfad funktioniert in Firefox, aber nicht in Chrome

Question

Während ich an einem neuen Projekt arbeitete, stieß ich auf ein seltsames Problem, das ich einfach nicht beheben kann. Ich verwende 5 DIVs, jede mit ihrem eigenen SVG Clip-Pfad. Während dies in Firefox funktioniert (1. Screenshot), werden die Masken in Chrome nicht angewendet (Internet Explorer wird nicht erwähnt). Hier ist der Teil des HTML, der für das Erstellen der DIVs verantwortlich ist. Die zwei "_sep" divs sind die weißen Linien, die Sie zwischen den anderen drei Haupt-DIVs sehen können.

<div class="main bg"> 

    <div id="left" class="index_clip"> 
     <img src="includes/img/main/parts.png"> 
    </div> 

    <div id="left_sep" class="index_clip"> 

    </div> 
    <div id="mid" class="index_clip"> 
     <img src="includes/img/main/werkstatt.png"> 
    </div> 

    <div id="center_sep" class="index_clip"> 

    </div> 

    <div id="right" class="index_clip"> 
     <img src="includes/img/main/suspension.png"> 
    </div> 
    <!-- <img id="overlay" src="includes/img/main/overlay.png"> --> 
</div> 

CSS:

.index_clip{ 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
} 
#left{ 
    -webkit-clip-path: url('../svg/svg.svg#left_clip'); 
    clip-path: url('../svg/svg.svg#left_clip'); 
    z-index: 2; 
} 
#left img{ 
    top: 50%; 
    left: 7%; 
    transform:translate(0px, -50%); 
} 
#left_sep{ 
    -webkit-clip-path: url('../svg/svg.svg#left_sep_clip'); 
    clip-path: url('../svg/svg.svg#left_sep_clip'); 
    z-index: 2; 
    background-color: white; 
} 

#mid{ 
    z-index: 1; 
     -webkit-clip-path: url('../svg/svg.svg#center_clip'); 
     clip-path: url('../svg/svg.svg#center_clip'); 
} 
#mid img{ 
    left: 50%; 
    top: 50%; 
    transform: translate(-50%,-50%); 
} 
#center_sep{ 
    -webkit-clip-path: url('../svg/svg.svg#center_sep_clip'); 
    clip-path: url('../svg/svg.svg#center_sep_clip'); 
    background-color: white; 
} 
#right{ 
    -webkit-clip-path: url('../svg/svg.svg#right_clip'); 
    clip-path: url('../svg/svg.svg#right_clip'); 
    z-index: 1; 
    /*background-color: blue; */ 
} 

#right img{ 
    top: 50%; 
    transform: translate(0px,-50%); 
    left: 82%; 
} 

ich bereits herausgefunden, dass Chrome den falschen relativen Pfad verwendet. Es sieht so aus, als ob Chrome "url ('../ svg/svg.svg # left_sep_clip')" vom Speicherort der Datei index.php interpretiert, nicht von der CSS-Datei. Ich habe bereits versucht, absolute URLs zu verwenden, funktioniert aber in Chrome immer noch nicht. Was ist der Grund dafür, dass es in Chrome nicht funktioniert? Wie kann ich das Problem beheben? Sie können ein Live-Beispiel versuchen here

Answer 1

Chrome unterstützt keine Formen, die SVGs von externen SVGs verwenden.

http://caniuse.com/#search=clip-path