如何将剪切路径应用于DIV容器

我正在尝试建立一种进度条，类似于Chris Coyier在这里所做的操作：https ://css-tricks.com/css3-progress-bars/ ，不同之处在于我想将SVG剪切路径应用于周围div元素。

例如，我想将SVG剪切路径应用于.rating-stars：

您可以在此处查看到目前为止的内容：http : //codepen.io/rleichty/pen/GrWmRR

由于某些原因，它在Safari中不起作用，我也不确定如何调整SVG剪切路径的大小（如果可能的话）。

有谁知道我将如何做到这一点，或者有更好的解决方案？

弄清楚了。这是这里的最终代码：http : //codepen.io/rleichty/pen/zNZajM

HTML：

CSS：

$ratingHeight: 100px;

.rating-container {
    position: relative;
    width: calc((100 / 19) * #{$ratingHeight});
    height: $ratingHeight;
}

.rating-stars {
    position: absolute;
    width: 100%;
    height: 0%;
    padding-bottom: 100%;
    background: lightgray;
    -webkit-clip-path: url(#svgStars);
    clip-path: url(#svgStars);
    -webkit-clip-path: polygon(80% 7.3%, 73.8% 11.8%, 76.2% 19%, 70% 14.5%, 63.8% 19%, 66.2% 11.8%, 60% 7.3%, 53.8% 11.8%, 56.2% 19%, 50% 14.5%, 43.8% 19%, 46.2% 11.8%, 40% 7.3%, 33.8% 11.8%, 36.2% 19%, 30% 14.5%, 23.8% 19%, 26.2% 11.8%, 20% 7.3%, 13.8% 11.8%, 16.2% 19%, 10% 14.5%, 3.8% 19%, 6.2% 11.8%, 0 7.3%, 7.6% 7.3%, 10% 0, 12.4% 7.3%, 27.6% 7.3%, 30% 0, 32.4% 7.3%, 47.6% 7.3%, 50% 0, 52.4% 7.3%, 67.6% 7.3%, 70% 0, 72.4% 7.3%, 87.6% 7.3%, 90% 0, 92.4% 7.3%, 100% 7.3%, 93.8% 11.8%, 96.2% 19%, 90% 14.5%, 83.8% 19%, 86.2% 11.8%);
    clip-path: polygon(80% 7.3%, 73.8% 11.8%, 76.2% 19%, 70% 14.5%, 63.8% 19%, 66.2% 11.8%, 60% 7.3%, 53.8% 11.8%, 56.2% 19%, 50% 14.5%, 43.8% 19%, 46.2% 11.8%, 40% 7.3%, 33.8% 11.8%, 36.2% 19%, 30% 14.5%, 23.8% 19%, 26.2% 11.8%, 20% 7.3%, 13.8% 11.8%, 16.2% 19%, 10% 14.5%, 3.8% 19%, 6.2% 11.8%, 0 7.3%, 7.6% 7.3%, 10% 0, 12.4% 7.3%, 27.6% 7.3%, 30% 0, 32.4% 7.3%, 47.6% 7.3%, 50% 0, 52.4% 7.3%, 67.6% 7.3%, 70% 0, 72.4% 7.3%, 87.6% 7.3%, 90% 0, 92.4% 7.3%, 100% 7.3%, 93.8% 11.8%, 96.2% 19%, 90% 14.5%, 83.8% 19%, 86.2% 11.8%);
}

.rating {
    position: absolute;
    display: block;
    width: 50%;
    height: 100%;
    background-color: orange;
}

您可以通过调整此SCSS变量来调整星星的高度。$ratingHeight: 100px;不需要使用该变量，但是它使调整一个值更加简单（您也可以将其翻转以便优先考虑宽度）。

正如她指出的，我在这里https://sarasoueidan.com/blog/css-svg-clipping/找到了很多帮助：

这里要注意的一件重要的事情是，当您使用 objectBoundingBox 值，坐标指定的内容 必须在区间[0,1] -The坐标系成为一个单元系统，和形状的内部坐标clipPath有在该范围内的分数。

因此，我不得不将SVG坐标调整为分数。

为了保持基于百分比的剪切路径的高宽比，我在这里找到了帮助如何保持基于百分比的剪切路径的高宽比？并简单地使用了padding-bottom窍门。

现在，您需要做的就是使用jQuery动态设置.rating元素的宽度以表示星级。就我而言，我将从Goodreads中提取数据。

我个人比较喜欢这种方法，而不是每个等级都有单独的星级图像。它更简单，更轻便，并且基于矢量并且响应迅速。