如何将剪切路径应用于DIV容器 [英] How to Apply a Clipping Path to a DIV Container
问题描述
我正在尝试建立一种类似于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剪切路径的大小(如果可能的话).
有人知道我将如何实现这一目标，或者有更好的解决方案吗?
弄清楚了.这是这里的最终代码: 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坐标调整为分数.
为了保持基于百分比的剪切路径的长宽比，我在这里找到了帮助https://css-tricks.com/css3-progress-bars/, except that I want to apply a SVG clipping path to the surrounding div element.
For example, I want to apply a SVG clipping path to .rating-stars:
<div class="rating-stars">
<span class="rating"></span>
</div>
You can see what I have so far here: http://codepen.io/rleichty/pen/GrWmRR
It doesn't work in Safari for some reason, and I'm also not sure how to resize the SVG clipping path (if that's even possible).
Does anyone know how I might accomplish this, or perhaps have a better solution?
Figured it out. Here's the final code here: 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;
}
You can adjust the height of the stars by adjusting this SCSS variable $ratingHeight: 100px; You don't need to use the variable, but it makes it simpler to adjust only one value (you could also flip it around so that the width is prioritized).
I found a lot of help here https://sarasoueidan.com/blog/css-svg-clipping/ as she notes:
One important thing to note here is that when you use the
objectBoundingBoxvalue, 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 aclipPathhave to be fractions in that range.
So I had to adjust the SVG coordinates to fractions.
In order to keep the aspect ratio of a percentage based clipping path, I found help out here How do I keep the aspect ratio of a percentage based clipping path? and simply used the padding-bottom trick.
Now all you need to do is use jQuery to dynamically set the width of the .rating element to represent a star rating. In my case, I'll be pulling data from Goodreads.
Personally I like this method as opposed to having separate star images for every single rating. It's simpler and more lightweight, as well as being vector based and responsive.
这篇关于如何将剪切路径应用于DIV容器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
