我的背景图片具有background-size：cover; 应用到它，然后一系列的div叠加，我想成为单独的剪贴蒙版。
我看过功能片段：rect（20px，20px，20px，20px，）; 但是，由于div是通过CMS系统引入的，因此定义集合大小是不合适的。
有没有一种方法可以设置带有剪贴蒙版属性的div，以便在将div放置在页面上的任何位置上剪切图像？
我也不想使用图像叠加层，因为此站点会响应。
我正在尝试建立一种进度条，类似于Chris Coyier在这里所做的操作：https ://css-tricks.com/css3-progress-bars/ ，不同之处在于我想将SVG剪切路径应用于周围div元素。
例如，我想将SVG剪切路径应用于.rating-stars：
<div class="rating-stars">
<span class="rating"></span>
</div>
您可以在此处查看到目前为止的内容：http : //codepen.io/rleichty/pen/GrWmRR
由于某些原因，它在Safari中不起作用，我也不确定如何调整SVG剪切路径的大小（如果可能的话）。
有谁知道我将如何做到这一点，或者有更好的解决方案？