CSS-клип работает в Firefox, но не в хроме

Question

При работе над новым проектом я столкнулся с странной проблемой, которую я просто не могу исправить. Я использую 5 DIV, каждый со своим SVG-клипом. Хотя это отлично работает в Firefox (1-й снимок экрана), маски не применяются в Chrome (даже не упоминая Internet Explorer). Вот часть HTML, отвечающая за создание DIV. Два «_sep» divs - это белые линии, которые вы можете видеть между тремя другими основными 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 интерпретирует «url (« ../ svg/svg.svg # left_sep_clip ») из местоположения файла index.php, а не файл CSS. Я уже пробовал использовать абсолютные URL-адреса, но он по-прежнему не работает в Chrome. В чем причина, почему он не работает в Chrome? Как я могу исправить проблему? Вы можете попробовать живой пример here

Answer 1

Хром не поддерживает формы с использованием SVG из внешних SVG.

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