微信搜索【GreatMovetotheWorld】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。评价打分也是一个内容服务网站的重要组成部分，有利于分析用户对我们内容的喜好。最近，我们组需要为一个项目实现一个星级组件。需求如下：性能（不能使用图片）可调尺寸可访问性小数点打分（eg：3.5或3.2）使用css直接控制样式需求满足以上需求后，我们进行了频繁的调研，最终选择了SVG方案。下图就是我们想要的最终效果：我们的主要工作是让星星可以改变颜色、笔触、大小，显示半个星星。实现在实现之前，我们需要有一个像这样的基本SVG结构：添加aria-label添加aria-label屏幕阅读器用户可以访问此信息。
aria-label属性用于描述添加到当前元素的标签，接受一个字符串作为参数。就是用一种不可见的方式给元素加上标签（如果被描述元素有真实的描述元素，可以使用aria-labelledby属性来绑定描述元素和被描述元素）。如何复用SVG我们可以将上面的SVG标签复制五次，或者把路径数据提取出来保存在某个地方，不用重复代码就可以复用。我们选择后者。首先，我们需要创建一个宽度和高度为零的SVG，这样它就不会保留空间。
在此SVG中，我们需要在元素中包含路径数据。根据MDN：symbol元素用于定义一个图形模板对象，可以通过星号有了上面的星形结构，现在让我们添加样式：.c-icon{--star-active:#fece3c;--star-inactive:#6c6962;fill:var(--star-inactive);}.c-icon.active{fill:var(--star-active);}运行后结果：halfstar使用SVG后很容易做出halfstar，有两个很好的解决方案，第一个是使用，第二个是使用SVG渐变。使用使用masks的目的是模拟抹去星星的一部分，另一部分涂上半透明颜色的效果。在上图中，有一个正方形和一个星形。它们的交集就是我们想要的结果。方法如下：创建一个可重复使用的SVG模板在x=50%处添加一个元素将遮罩应用于星星question但是我们怎样才能当它被覆盖时显示一个半透明的星星？好吧，感谢SVG，我们可以在中包含多个元素。在mask中，白色元素代表我们要显示的内容，黑色元素代表我们要隐藏的内容。结合起来，我们可以创建一个裁剪效果。请注意，白色矩形位于0,0点，而黑色矩形位于50%,0。这是它的样子：潦草的部分代表最终结果，半颗星。现在，您可能想知道，如何添加另一颗半透明星星以使其更清晰？通过使用比纯黑色更浅的颜色，我们会得到半透明的效果。这意味着当前隐藏的区域将具有较浅的星形颜色。在这里，让我们回顾一下完整的SVG标签。<路径d="..."/>这样，我们就有了一颗部分填充的星星。这个方案的妙处在于，我们不需要提供两种色度，遮罩就可以工作了：示例地址：https://codepen.io/shadeed/pe...第一种方法介绍到这里，我们来看看第二种方法。HalfstarwithSVGgradient和mask类似，我们需要在元素中定义一个渐变。注意我们有两个色块，第一个代表前半部分，第二个代表浅色。在这个解决方案中，我们需要手动提供两种颜色。示例地址：https://codepen.io/shadeed/pe...轮廓样式接下来我们给星星画一个轮廓，这样看起来更加立体。SVGMask解决了轮廓样式的问题。要添加描边，我们只需要给SVG元素添加描边即可。这将适用于全明星。但是，对于partials，它会因为遮罩而被切断。这对满星来说很好。然而，对于半芯片，它会由于掩模而被覆盖。为了解决这个问题，我们需要另一个星形轮廓。这可以通过复制请注意，我们有两个业务地址：https://codepen.io/shadeed/pe...size我们可以通过使用CSS变量轻松调整它们的大小，并确保SVG具有正确的viewBox属性。.c-icon{width:var(--size,24px)height:var(--size,24px);}.c-icon--md{--size:40px;}.c-icon--lg{--size:64px;}~终于学渣了，我要去SPA了，下次见~原文：https://ishadeed.com/article/...编辑中可能出现的bug不能实时我知道后来为了解决这些bug，我花了很多时间在日志调试上。顺便给大家推荐一个好用的BUG监控工具Fundebug。交流有梦想，有干货，微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。
