如何将剪切路径应用于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剪切路径的大小（如果有可能的话）。

有没有人知道我该如何实现这一点，或者可能有更好的解决方案？

- Ryan

---

http://caniuse.com/#search=clip-path 你检查过了吗？ - Aslam

你可以从 https://github.com/nashio/star-rating-svg/ 获取一些想法。 - Aslam

@hunzaboy 我确实检查过了，它列出Safari是兼容的，所以我不确定为什么我的代码在那个浏览器中无法工作。 - Ryan

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]的范围内-坐标系统成为单位系统，并且剪辑路径中的形状的坐标必须是该范围内的分数。

所以我必须将SVG坐标调整为分数。

为了保持基于百分比的裁剪路径的纵横比，我在这里找到了帮助如何保持基于百分比的裁剪路径的纵横比？ ，并简单地使用了padding-bottom技巧。

现在，您只需要使用jQuery动态设置.rating元素的宽度来表示星级评分。在我的情况下，我将从Goodreads中获取数据。

个人而言，与为每个单独的评级拥有单独的星形图像相比，我更喜欢这种方法。它更简单，更轻量级，而且是矢量基础和响应式。

- Ryan