svg - 有没有办法在没有 CSS 的情况下将剪辑路径应用于 div？

Question

我正在尝试使用 svg 剪辑路径剪辑一个 div，因为 css 规则clip-path: url(#foo)的支持很差。所以我想可能我可以将 svg 剪辑路径附加到具有 html 属性的 div 上clip-path="#foo"。就像这里的例子一样 -链接。但它不起作用。

这是我的 svg 元素和 div。

<svg class="svg-graphic">
      <defs>
       <clippath id="hexagonal-mask">
          <polygon points="130,0 0,160 0,485 270,645 560,485 560,160" />
       </clippath>
      </defs>

       <div class="element" clip-path="#hexagonal-mask">
         <div class="content">
           <h2>How it works</h2>
           <p>
             Download<span class="icon"></span>
           </p>
           <p>
             Watch video and Play games<span class="icon"></span>
           </p>
           <p>
             Choose your <span class="icon"></span>
           </p>
         </div>
       </div>
  </svg>

当我打开一个元素检查器时，我看到我的 div 以某种方式出现在 svg 元素之外。 http://prntscr.com/ay7kxt 而且剪辑路径不适用。

我是在做错什么，还是这种方法不适用于 div，仅适用于 , 之类的形状？