CSS剪辑路径适用于Firefox，但不适用于Chrome

Question

在处理一个新项目时，我遇到了一个奇怪的问题，我根本无法解决。 我正在使用5个DIV，每个都有自己的SVG剪辑路径。虽然这在Firefox（第1次截图）中工作正常，但是这些掩码不适用于Chrome（甚至不提及Internet Explorer）。 这是负责创建DIV的HTML部分。两个“_sep”div是你可以在其他三个主要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使用错误的相对路径。似乎Chrome从index.php文件的位置解释“url（'../ svg / svg.svg＃left_sep_clip'）”，而不是CSS文件。我已经尝试过使用绝对网址，但它仍无法在Chrome中使用。它无法在Chrome中运行的原因是什么？我该如何解决这个问题？您可以尝试一个实例here

Answer 1

Chrome不支持使用外部SVG的SVG形状。

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