html - CSS clip-path 适用于 Firefox，但不适用于 chrome

Question

在处理一个新元素时，我遇到了一个我无法解决的奇怪问题。 我正在使用 5 个 DIV，每个都有自己的 SVG 剪辑路径。虽然这在 Firefox 中运行良好(第一个屏幕截图)，但在 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 文件而不是 CSS 文件的位置解释“url('../svg/svg.svg#left_sep_clip')”。我已经尝试使用绝对 URL，但它在 Chrome 中仍然不起作用。它在 Chrome 中不起作用的原因是什么？我该如何解决这个问题？您可以尝试一个实例 here

Answer 1

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

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