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

Question

我正在尝试建立一种进度条，类似于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剪切路径的大小（如果可能的话）。

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

Answer 1

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

HTML：

<div class='rating-container'>
    <div class='rating-stars'>
        <span class='rating'></span>
    </div>
</div>

<svg width='0' height='0'>
    <defs>
        <clipPath id='svgStars' clipPathUnits = 'objectBoundingBox'>
            <polygon points=".80 .073 .738 .118 .762 .19 .70 .145 .638 .19 .662 .118 .60 .073 .538 .118 .562 .19 .50 .145 .438 .19 .462 .118 .40 .073 .338 .118 .362 .19 .30 .145 .238 .19 .262 .118 .20 .073 .138 .118 .162 .19 .10 .145 .038 .19 .062 .118 0 .073 .076 .073 .10 0 .124 .073 .276 .073 .30 0 .324 .073 .476 .073 .50 0 .524 .073 .676 .073 .70 0 .724 .073 .876 .073 .90 0 .924 .073 1 .073 .938 .118 .962 .19 .90 .145 .838 .19 .862 .118 "/>
        </clipPath>
    </defs>
</svg>

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 值，坐标指定的内容 <clipPath> 必须在区间[0,1] -The坐标系成为一个单元系统，和形状的内部坐标clipPath有在该范围内的分数。

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

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

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

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