SVG Clip-Path funktioniert nicht auf einem div

Ich versuche, einen div Clip mit einem id="overlay-circle" Pfad zu schneiden, aber es scheint nicht zu funktionieren. Hier ist mein HTML-Code:SVG Clip-Path funktioniert nicht auf einem div

<html> 
    <body> 
     <svg> 
      <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox"> 
       <polygon id="clipPoints" points="0.5, 2 3, 3 0.5" /> 
      </clipPath> 
     </svg> 
     <div id="letterWrapper"> 
      <div id="halo"></div> 
      <div id="overlay-circle"></div> 
      <div id="letter"> 
       <div id="letter-spotlight"></div> 
      </div> 
     </div> 
    </body> 
</html>

Und hier ist mein CSS:

#overlay-circle 
{ 
    position: absolute; 
    top: 35%; 
    left: 39%; 
    border-radius: 50%; 
    height: 95px; 
    width: 95px; 
    background: -moz-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%); 
    z-index: 2; 
    clip-path: url(#clipPolygon); 
}

Ich ging durch viele Artikel kann aber nicht herausfinden, was es ist, dass ich falsch mache. Irgendwelche Ideen? Vielen Dank.

Quelle

2016-04-23 Nikolay

Wenn Ihr CSS eine separate Datei ist dann gibt es keine clipPolygon in Ihrer CSS-Datei. #x ist die Abkürzung für #x Ist das dein Problem? –

Okay, ich habe diesen Code innerhalb in der HTML-Datei verschoben, aber es ist alles gleich. Das Problem ist, ich habe keine Probleme in Opera, aber Firefox möchte nicht meine Svg anzeigen. – Nikolay

Ihr Polygon ist ungültig, die Anzahl der Punkte ist ungültig (eine ungerade Zahl) es muss gerade sein, da es aus Paaren von Koordinaten besteht. –

Ihr Problem ist mit dem Präfix -moz-, das Sie für linearen Farbverlauf verwenden. Wenn Sie beispielsweise in Chrome getestet haben, wird ein leerer Bildschirm angezeigt. Sie benötigen eine Steigung Eigenschaft Unterstützung erweitern:

background: -moz-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%); 
background: -webkit-linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%); 
background: linear-gradient(top left, #3f566d 0%, #8f97a7 30%, #fff 100%);

Ergebnis:

Quelle

2016-04-23 17:58:11

Ich sehe nicht, wie das mit dem Clip-Pfad zusammenhängt. Ich teste gerade auch nur in einem Browser, sodass ich nicht alle Browser unterstützen muss. – Nikolay

SVG Clip-Path funktioniert nicht auf einem div

Antwort

Verwandte Themen