Insane CSS Clip Path Ошибка в Firefox

Я пробовал путь для клипа CSS от http://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/, и у меня есть эта безумная ошибка. Вкратце, код работает как с CodePen, так и с JSFiddle, но он не работает на моем локальном/приложении.Insane CSS Clip Path Ошибка в Firefox

Вот код для многоугольника, который я пытался придумать. Сначала CSS:

nav { 
    position: fixed; 
    bottom: 0; 
    background: #BE0F16; 
    color: #fff; 
    width: 100%; 
    padding: 2rem 1rem; 
    text-align: right; 
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%); 
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 50%); 
    -webkit-clip-path: url("#clip-shape"); 
    clip-path: url("#clip-shape"); 
} 
nav .next-chapter { 
    color: #fff; 
    padding-left: 1rem; 
}

А вот соответствующий HTML:

<!DOCTYPE html> 
<html> 

<head> 
    <title>Something</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
    <link href="css.css" rel="stylesheet" /> 
</head> 

<body> 
    <nav> 
     <a class="menu"><i title="Menu" class="fa fa-bars"></i><h1 class="visuallyhidden">Menu</h1></a> 
     <a class="next-chapter" href="/<%=next%>"><i title="Next Chapter" class="fa fa-hand-o-right"></i><span class="visuallyhidden">Next Chapter</span></a> 
     <a id="comment" href="http://twitter.com/[email protected]"></a> 
    </nav> 
    <svg width="0" height="0"> 
     <defs> 
      <clipPath id="clip-shape" clipPathUnits="objectBoundingBox"> 
       <polygon points="0 0, 0 1, 1 1, 1 .5" /> 
      </clipPath> 
     </defs> 
    </svg> 
    <script src="script.js"></script> 
</body> 

</html>

Когда я открываю index.html (выше HTML), он показывает прямоугольник вместо полигона я ожидал. Тем не менее я следовал точным инструкциям, как указано в статье.

Затем я скопировать код в CodePen (http://codepen.io/anon/pen/JdwrQw) и JSFiddle(), на том же браузере, и она работает.

Я не могу для своей жизни понять это. Firefox понимает и делает css-клип по одному и тому же коду на CodePen и JSFiddle, но не на моем HTML-коде? Конечно, я скопировал весь свой HTML-код в Codepen, и css-клип работает. Это полностью вне меня. Если кто-то может просто придумать предложение, которое, возможно, очевидно очевидно, но я как-то пропустил его, я буду очень благодарен.

источник

2015-08-02 Uebyn

Предполагая, что КСС в отдельном файле, т.е. css.css, когда вы пишете

clip-path: url("#clip-shape");

что на самом деле коротка для

clip-path: url("css.css#clip-shape");

Но файл css.css не имеет элемент с id клип-формы (все элементы находятся в html-файле).

Вам нужно написать

clip-path: url("<the name of the html file goes here>#clip-shape");

Очевидно, что если вы используете jsfiddle все идет в том же документе, так что вы не видите эту проблему там.

Здесь нет ошибки в Firefox.

источник

2015-08-02 14:28:28

Большое спасибо. Мне никогда не приходило в голову, что это может быть проблемой! Да, конечно, я понимаю, что это не ошибка Firefox, так как она отлично работает на JSFiddle, просто я не могу найти другое слово, чтобы описать это «странное» поведение. Еще раз спасибо. – Uebyn

спасибо, это фиксируется, если правило было в файле CSS:

.myclass{ 
clip-path: url("/~powersparks/bz.html#clip"); 
}

он также работает и требуется, если только добавляется к шаблону d3:

 svg.append("path") 
     .datum(data) 
     .attr("class", "area") 
     .attr("clip-path", "url('/~powersparks/bz.html#clip')") 
     .attr("d", area);

источник

2016-11-20 03:09:54

Insane CSS Clip Path Ошибка в Firefox

ответ

Смежные вопросы