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> <的内容指定的坐标strong>必须在[0,1] 范围内 - 坐标系变为单位系统，clipPath内的形状坐标必须是该范围内的分数。

所以我不得不将SVG坐标调整为分数。

为了保持基于百分比的剪切路径的宽高比，我在How do I keep the aspect ratio of a percentage based clipping path?找到了帮助，只使用了padding-bottom技巧。

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

我个人喜欢这种方法，而不是每个评级都有单独的星形图像。它更简单，更轻巧，并且基于矢量和响应。

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

1 个答案: