iMrFelix
iMrFelix

Reputation: 345

CSS clip-path works in Firefox, but not in chrome

While working on a new project, I encountered a weird issue I simply can't fix. I am using 5 DIVs, each with their own SVG clip-path. While this works fine in Firefox (1st screenshot), the masks aren't applied in Chrome (not even mentioning Internet Explorer). enter image description here Here's the part of the HTML responsible for creating the DIVs. The two "_sep" divs are the white lines you can see between the other three main DIVs.

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

I already found out that Chrome uses the wrong relative path. It seems, as if Chrome interprets "url('../svg/svg.svg#left_sep_clip')" from the location of the index.php file, not the CSS file. I already tried using absolute URLs, but it still doesn't work in Chrome. What is the reason for it not working in Chrome? How can I fix the issue? You can try a live example here

Upvotes: 0

Views: 1071

Answers (1)

Rob
Rob

Reputation: 15150

Chrome does not support shapes using SVGs from external SVGs.

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

Upvotes: 1

Related Questions