CSS剪辑路径无法在Chrome 63

Question

我在六角形div中制作了“雷达”效果。这是一个旋转的图像，有一个剪辑路径，使其看起来像六角形内部。

以下是我项目中相同代码的小提琴：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%;	
      }
      .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-clip-path）在离子页面上不起作用，即使在谷歌Chrome和Android版Firefox上，也可以在PC上完美运行，也可以通过Ionic服务。< / p>

以下是设备上的结果：

我发现this topic看似相关，但是在剪辑路径上使用SVG的建议仍然没有结果。 （您可以在css文件中找到两种剪辑路径的方法）

想法？

- 编辑 -

Chrome似乎有partial support到剪辑路径，形状和内嵌 svgs。但即使使用shape属性，它也无法正常工作。 （但Firefox正确显示多边形）我正在寻找内联svg的含义。

- 编辑2 -

Clip-Path正在使用Chrome 62.似乎这是一个错误。

Answer 1

Chrome版本64中的问题已解决。