如何将剪切路径应用于 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/ 正如她所说：

One important thing to note here is that when you use the objectBoundingBox value, the coordinates specified for the contents of the <clipPath> must be in the range [0, 1]—the coordinate system becomes a unit system, and the coordinates of the shapes inside a clipPath have to be fractions in that range.

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

为了保持基于百分比的剪切路径的纵横比，我在这里找到了帮助 How do I keep the aspect ratio of a percentage based clipping path? 并简单地使用了 padding-bottom 技巧。

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

我个人喜欢这种方法，而不是为每个评分都使用单独的星图。它更简单、更轻便，并且基于矢量和响应迅速。

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

How to Apply a Clipping Path to a DIV Container

html

css

svg

safari

clip-path