2017-12-16 10 views
1

六角形のdiv内に「レーダー」効果を作りました。それは回転している画像で、内部が六角形のように見えるようにするためのクリップパスがあります。ここでChromeで動作しないCSSクリップパス63

は私のプロジェクトで同じコードのフィドルです:https://jsfiddle.net/f6633a79/17/

body{ 
 
     background : gray; 
 
    } 
 
    $azul : #3399dd; 
 
    $sombra : 0px 0px 35px 2px $azul; 
 

 
    .center{ 
 
     position: absolute; 
 
     margin: auto; 
 
     top: 0; 
 
     right: 0; 
 
     bottom: 0; 
 
     left: 0; 
 
     width: 100px; 
 
     height: 100px; 
 
     z-index: -99;   
 
    } 
 
    .retentor{ 
 
     height: 100%; 
 
     width: 87px; 
 
     left: -50%; 
 
     z-index: 1; 
 
     position: relative; 
 
     //clip-path: url(#svgPath); 
 
     clip-path: polygon(0 50%, 25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%); 
 
     } 
 
     .hexagon .pointer { 
 
     position: absolute; 
 
     z-index: 1024; 
 
     left: -10px; 
 
     right: -10px; 
 
     top: -10px; 
 
     bottom: 50%; 
 
     will-change: transform; 
 
     transform-origin: 50% 100%; 
 
     border-radius: 50% 50% 0 0/100% 100% 0 0; 
 
     background-image: linear-gradient(135deg, 
 
      rgba(255, 255, 255, 0.8) 0%, 
 
      rgba(255, 255, 255, 0.02) 70%, 
 
      rgba(255, 255, 255, 0) 100% 
 
     ); 
 
      -webkit-clip-path: polygon(100% 0, 
 
      100% 10%, 
 
      50% 100%, 0 100%, 0 0); 
 
     clip-path: polygon(100% 0, 
 
      100% 10%, 
 
      50% 100%, 0 100%, 0 0); 
 
     
 
     animation: rotate360 3s infinite linear; 
 
     } 
 
     
 
     @keyframes rotate360 { 
 
     0% { 
 
      transform: rotate(0deg); 
 
     } 
 
     to { 
 
      transform: rotate(-360deg); 
 
     } 
 
     } 
 
     #hex1 { 
 
     width: 75px; 
 
     height: 75px; 
 
     } 
 
    
 
     #radar { 
 
     background-color: #39D; 
 
     } 
 
     .centralizador{ 
 
     position: absolute; 
 
     left: 50%; \t 
 
     } 
 
     .hexagon-wrapper { 
 
     text-align: center; 
 
     position: relative; 
 
     display: inline-block; 
 
     } 
 
     .hexagon { 
 
     height: 100%; 
 
     width: 57.735%; 
 
     display: inline-block; 
 
     
 
     } 
 
     .hexagon:before { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 21.1325%; 
 
     background-color: inherit; 
 
     height: inherit; 
 
     width: inherit; 
 
     content: ''; 
 
     transform: rotate(60deg); 
 
     } 
 
    
 
     .hexagon:after { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 21.1325%; 
 
     background-color: inherit; 
 
     height: inherit; 
 
     width: inherit; 
 
     content: ''; 
 
     transform: rotate(-60deg); 
 
     } 
 
     .hexagonshadow { 
 
     height: 100%; 
 
     width: 57.735%; 
 
     display: inline-block; 
 
     position: absolute; 
 
     left: 20%; 
 
     z-index: -6; 
 
     box-shadow: $sombra; 
 
     animation: shadow 3s infinite ease; 
 
     } 
 
     
 
     @keyframes shadow { 
 
     0% { 
 
      opacity: 0; 
 
     } 
 
     50% { 
 
      opacity: 1; 
 
     } 
 
     to { 
 
      opacity: 0; 
 
     } 
 
     } 
 
     
 
     .hexagonshadow:before { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 21.1325%; 
 
     background-color: inherit; 
 
     height: inherit; 
 
     width: inherit; 
 
     content: ''; 
 
     transform: rotate(60deg); 
 
     box-shadow: $sombra; 
 
     } 
 
    
 
     .hexagonshadow:after { 
 
     position: absolute; 
 
     top: 0; 
 
     right: 21.1325%; 
 
     background-color: inherit; 
 
     height: inherit; 
 
     width: inherit; 
 
     content: ''; 
 
     transform: rotate(-60deg); 
 
     box-shadow: $sombra; 
 
     }
<div class="center"> 
 
    <div id="hex1" class="hexagon-wrapper"> 
 
    <div id="radar" class="hexagon">     
 
     <div class="retentor"> 
 
     <div class="pointer"></div> 
 
     </div> 
 
    </div> 
 
    <div class="hexagonshadow"></div>   
 
    </div> 
 
</div> 
 

 
<svg width="0" height="0"> 
 
    <defs> 
 
     <clipPath id="svgPath" clipPathUnits="objectBoundingBox"> 
 
      <polygon points="0 0.5, 0.25 0, 0.75 0, 1 0.5, 0.75 1, 0.25 1" /> 
 
     </clipPath> 
 
    </defs> 
 
</svg>

問題がクリップパス(および-webkit-クリップパス)が動作していないということですイオンページでは、Google ChromeやAndroid用Firefoxでも、Ionicサービスを通じてPC上で完璧に動作します。ここで

は、デバイス上の結果である:

result

私は、関連すると思われるthis topicを見つけましたが、静止画が無い結果につながるクリップパスにSVGを使用するための提案。 (あなたは両方のクリップパスの方法をCSSファイルで見つけることができます)

アイデア?

--EDIT--

クロム形状とインライン svgsに、パスをクリップするpartial supportを有していると思われます。しかし、シェイププロパティでも、正しく機能しません。 (しかしFirefoxはポリゴンで正しく表示されています)インラインsvgの意味は何ですか? 2--

クリップパスはクローム62に取り組んでいる

--editが、それはバグであると思われます。

答えて

0

Chromeバージョン64で問題が解決しました。

関連する問題