CSS - クリップパスsvgがFirefoxで動作しない

私はクリップパスを使用しようとしていますが、これはFirefoxでは動作しません。私はすでにこれについて検索し、このコードがスタックオーバーフローで見つかった。私はいくつかの図形を実装していますが、これはクロムとサファリでしか機能しません。CSS - クリップパスsvgがFirefoxで動作しない

.shape 
 
{ 
 
    width: 300px; 
 
    height: 300px; 
 
    display: inline-block; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    -webkit-clip-path: url(#clipper); 
 
    -moz-clip-path: url(#clipper); 
 
    clip-path: url(#clipper); 
 
    background-color: $page-title-background-green; 
 

 

 
} 
 
img 
 
{ 
 
    position: absolute; 
 
    top: 2px; 
 
    left: 2px; 
 
    width: 296px; 
 
    height: 296px; 
 
    -webkit-clip-path: url(#clipper); 
 
    -moz-clip-path: url(#clipper); 
 
    clip-path: url(#clipper); 
 
}

<svg width="0" height="0"> 
 
    <defs> 
 
    <clipPath id="clipper" clipPathUnits="objectBoundingBox"> 
 
     <polygon points=".15 0, .7 0, 1 .5, .7 1, .15 1, 0 .7, .2 .5, 0 .3"/> 
 
    </clipPath> 
 
    </defs> 
 
</svg> 
 
<div class="shape"> 
 
    <img src="http://lorempixel.com/g/600/400/"> 
 
</div>

どのように私はそれを解決できますか？

感謝の

出典

2016-09-16 user3242861

あなたのウェブページにはCSSが埋め込まれていますか、それとも別のCSSファイルですか。それが別のファイルの場合、＃clipperは実際には #clipperの略であり、CSSファイルにはidというclipperのIDは含まれていません（htmlファイルにあります）。 –

私のCSSは別のファイルにあります。ファイルの名前をどこに入れますか？ CSSで？ありがとう@ローバートロングソン – user3242861

url（あなたのHTMLファイル名is.html＃clipper） –

私はこのコードを持っている：

<body> 
 
     <svg class="svg-defs"> 
 
      <defs> 
 
       <clipPath id="clipping"> 
 
        <polygon points="98.4999978 153.75 38.2520165 185.424245 49.7583542 118.337123 1.01670635 70.8257603 68.3760155 61.037872 98.5000012 1.1379786e-14 128.624005 61.0378871 195.98331 70.8258091 147.241642 118.337136 158.747982 185.424247"></polygon> 
 
       </clipPath> 
 
      </defs> 
 
     </svg> 
 
     <svg width="200" height="300"> 
 
      <style type="text/css" media="screen"> 
 
       image { 
 
        clip-path: url(#clipping); 
 
       } 
 
      </style> 
 
      <image xlink:href="http://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" width="200" height="300" /> 
 
     </svg> 
 
    </body>

だから、あなたのSVG要素内スタイルを設定、または画像にスタイル属性を与えることを試みますこのように：

<image style="clip-path: url(#clipping);" xlink:href="...">

出典

2016-09-26 15:14:22 Akkis

CSS - クリップパスsvgがFirefoxで動作しない

答えて

関連する問題