Html 如何将svg用于剪辑路径

我正试图建立一个明星评级功能，并惊讶地发现，给我带来最大麻烦的部分是如何获得明星的形状。在我看来，考虑到我已经构建的内容，最直接的方法是尝试使用SVG星形在显示评级的div元素上创建剪辑路径。我熟悉剪辑路径的一般意义，并将其用于更基本的形状，但我很难理解如何将其用于svg，以及为什么我当前的代码无法工作svg并不完全在我典型的驾驶室中

守则：

const stars=document.getElementsByClassName'star'； 函数fillStarsstarClasses，placeRating{ const wholeFill=数学。地板置换； const decimalFill=placeRating%1； 常量yellowFill=decimalFill.toFixed2.toString.replace'0'； 对于let i=0；i 我认为urlid没有得到完全支持，或者很难得到正确的支持

A不关于边框：边框将应用于边界框

看到最后一颗星了吗

.明星{ 宽度：50px； 高度：50px； 背景颜色：粉红色； 边框：实心1px灰色； 剪辑路径：Polygon 54.5%24.5%，80.25%24.27%，60.73%34.91%，75%52.25%，44.5%41.24%，15%52.75%，30.00%34.75%，1.5%25.25%，31.77%24.86%，41.82%9.01%； } 最后一颗星{ 背景色：f1e745； 高度：50px； 宽度：50px； 剪辑路径：Polygon 54.5%24.5%，80.25%24.27%，60.73%34.91%，75%52.25%，44.5%41.24%，15%52.75%，30%34.75%，-200.42%25.25%，31.77%24.86%，41.82%9.01%； 边框：1px纯黑； } 评级{ 显示器：flex； }

---

编辑：正如我所说的，很难正确使用标准SVG路径，但是添加变换比例是您需要做的事情，正如在所选答案中指出的，这是我现在学到的。下面是实现相同目的的其他方法，但选择的答案是最好的方法

也许这是您的路径定义，正如我在另一个回答中所说的，使用标准SVG路径时，urlid似乎有点难以正确

我从MDN复制了一条心脏路径，删除了RECT，你的代码就可以运行了

编辑：如果您不能为星形路径制定正确的定义语法，那么可以使用CSS中的多边形代码作为小数点来代替svg中的路径。 从svg中删除并替换为

 <polygon points="0.545 0.245, 0.8025 0.2427, 0.6073 0.3491, 0.75 0.5225, 0.445 0.4124, 0.15 0.5275, 0.3000 0.3475, 0.15 0.2525, 0.3177 0.2486, 0.4182 0.0901" />

从原始SVGs维度计算clipPath的0-1范围有一个很好的答案

.明星{ 宽度：30px； 高度：30px； 剪辑路径：urlstar剪辑； 背景：金； } 评级{ 显示器：flex； }

---

objectBoundingBox单位的范围为[0..1]，因此第一个矩形和路径明显太大。这是否回答了您的问题？最终，我需要抽出时间对SVG的工作方式进行更深入的研究，但我认为这个答案很有意义，并且完成了我试图做的事情。谢谢