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

Posted 2023-03-05

【中文标题】如何将剪切路径应用于 DIV 容器

【英文标题】：How to Apply a Clipping Path to a DIV Container

【发布时间】：2017-06-05 00:36:01

【问题描述】：

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

例如，我想对.rating-stars应用一个SVG剪切路径：

<div class="rating-stars">
    <span class="rating"></span>
</div>

你可以在这里看到我目前所拥有的：http://codepen.io/rleichty/pen/GrWmRR

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

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

【问题讨论】：

caniuse.com/#search=clip-path你查了吗？

你可以从github.com/nashio/star-rating-svg得到一些想法

@hunzaboy 我确实在那里检查过，它列出 Safari 是兼容的，所以我不确定为什么我的代码在那个浏览器中不起作用。

【参考方案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] 范围内——坐标系成为单位系统，clipPath 内的形状坐标必须是该范围内的分数。

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

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

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

就我个人而言，我喜欢这种方法，而不是为每个评分都设置单独的星图。它更简单、更轻量级，并且基于矢量和响应式。