SVG Clip-Pathがdivで動作しない

id="overlay-circle"でdivをパスクリップしようとしていますが、動作しないようです。ここSVG Clip-Pathが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); 
}

は、私は多くの記事を行ったが、私が間違ってやっているということ、それが何であるかを把握することはできませんが、ここに私のhtmlコードです。何か案は？ありがとうございました。

出典

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

これは、最初にクリップパスに関連する方法はわかりません。私はまた、今は1つのブラウザでしかテストしていないので、すべてのブラウザをサポートする必要はありません。 – Nikolay

SVG Clip-Pathがdivで動作しない

答えて

関連する問題