SVG剪輯路徑不能在div上工作

我想剪輯一個帶有id="overlay-circle"的div路徑，但它似乎不起作用。這裏是我的的html代碼：SVG剪輯路徑不能在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>

這是我的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); 
}

我經歷了很多文章去，但無法弄清楚它是什麼，我做錯了。有任何想法嗎？謝謝。

來源

2016-04-23 Nikolay

如果你的CSS是一個單獨的文件，那麼有沒有clipPolygon在你的CSS文件。 #x簡稱 #x是你的問題嗎？ –

好吧我在HTML文件中移動了以內的代碼，但都是一樣的。問題是我在Opera中沒有問題，但Firefox不想顯示我的SVG。 – Nikolay

你的多邊形是無效的，點的數量是無效的（奇數），它必須是偶數，因爲它由座標對組成。 –

你的問題是你用於線性漸變的-moz-前綴。如果您在Chrome中進行過測試，則會看到空白屏幕。你需要擴大你的梯度屬性的支持：

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

結果：

來源

2016-04-23 17:58:11

我不明白這是如何與剪輯路徑開始。我現在也只在一個瀏覽器中進行測試，所以我不需要支持所有的瀏覽器。 – Nikolay

SVG剪輯路徑不能在div上工作

回答

相關問題