CSSクリップパスはFirefoxでは動作しますが、クロムでは動作しません

Question

新しいプロジェクトを作成しているうちに、修正できない奇妙な問題が発生しました。 私はそれぞれ独自のSVGクリップパスを持つ5つのDIVを使用しています。これはFirefox（最初のスクリーンショット）で正常に機能しますが、マスクはChromeには適用されません（Internet Explorerは言及しません）。 ここに、DIVを作成するHTMLの部分があります。 2つの "_sep" divは、他の3つの主要なDIVの間に見える白い線です。

<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%; 
} 

私はすでにChromeが間違った相対パスを使用していることが分かりました。クロムが、CSSファイルではなくindex.phpファイルの場所から "url（ '../svg/svg.svg＃left_sep_clip'）を解釈するように見えます。私は既に絶対URLを使ってみましたが、それでもChromeでは動作しません。 Chromeで動作しない理由は何ですか？問題を解決するにはどうすればよいですか？実際の例を試すことができますhere

Answer 1

Chromeは外部SVGのSVGを使用した図形をサポートしていません。

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