有没有办法将剪辑路径应用到没有CSS的div？

Question

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

这是我的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有效，只有形状如此？