Reputation: 345
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). 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
Reputation: 15150
Chrome does not support shapes using SVGs from external SVGs.
http://caniuse.com/#search=clip-path
Upvotes: 1