SVG不仅仅是图标和插图，它还有很多我们开发人员有时会忘记的隐藏功能。与CSS相比，使用SVG有很多用途。例如，构建循环加载动画，或在图像上应用蒙版，在这种情况下并不意味着不能使用CSS，但有时根据所使用的技术（例如：蒙版）解决跨浏览器问题可以会很痛苦，所以使用SVG可以节省时间和精力。SVG的伟大之处在于它们具有响应性、高性能，并且可以开箱即用地使用HTML和CSS。在本文中，我的目标是向您介绍不同的用例，在这些用例中我们可以使用SVG以及HTML和CSS来构建特定的UI组件。现在，让我们进入用例，你准备好了吗？裁剪头像效果是我在看Facebook的CSS时发现的，在Messenger中你可以在用户的??头像上有一个提示徽章，裁剪头像为徽章分配空间。这可以通过添加CSS白色边框（作为快速修复）来完成。但是为什么不使用动态SVG组件更进一步呢？.badge{border:2pxsolid#ff;}你可能会想，如果边框有效，为什么还要使用SVG？好吧，这里没有对错之分。但是有一个解决方案比另一个更好，你还记得在数学课上老师可能会提到同一个问题可能有不同的解决方案，其中一个在灵活性方面可能更好吗？我对我们的处境也有同感。无论如何，我将向您展示边框解决方案如何快速失败，并且它会失败：悬停时：卡片背景发生变化，因此白色边框看起来很奇怪。深色模式：白色边框将位于黑色背景之上在下图中，请注意徽章的白色边框如何干扰深色背景和悬停状态。我们可以通过更改悬停时的边框颜色来解决此问题，但这对我来说似乎不是最佳解决方案。.card__badge{border:2pxsolid#ff;}.card:hover.card__badge{border-color:lightgrey;}@media(prefers-color-scheme:dark){.card__badge{border-color:#454545;}}使用更好的SVG，可以通过切割徽章下方的区域来解决上述问题，使其适用于任何类型的背景。考虑下图：我们使用SVG元素来包含头像，并且为了切出徽章区域，我们需要创建两个元素，一白一黑。在蒙版中，任何带有黑色填充的元素都将被隐藏，而白色元素将可见。黑圈在右下角，半径为18。在设计工具中，上面这个叫做减法，我们要用大圆减去小圆。代码演示地址：https://codepen.io/shadeed/pen/bGWaQOGSectionheading在我的一个客户项目中，我结合SVG和CSS设计并构建了一个sectionheading。品牌关系到安全，所以用这种款式可能比较合适。该组件需要处理短标题和长标题，如果标题太长，它应该在不破坏布局的情况下换行。为了构建它，我执行了以下操作：首先，我复制了固定部分（在右侧）并将其附加为内联SVG。使用CSS在标题下方创建线条，以及线条开头和结尾的小圆圈。我使用flexbox构建组件布局以避免使用任何不需要的定位。让我们从基本的HTML和CSS开始。HTML:CSS很棒CSS:.c-section__title{最大宽度：700px；宽度：适合内容；显示：弹性；左边距：自动；span>元素模仿SVG连接线。我注意到SVG没有与线连接，因为我们使用的是flexbox，所以修复它很简单，我们只需要将flex项目与flex-end对齐。.c-section__title{最大宽度：700px；宽度：适合内容；显示：弹性；对齐项目：flex-end；左边距：自动；margin-right:auto;}然后我们需要使用伪元素在开始和结束处添加圆圈。代码演示地址：https://codepen.io/shadeed/pen/bGoOxXL使用SVG的另一个好处是我们可以把SVG路径变成可以动画的虚线。为此，我们需要确保未列出SVG中的导出路径。HTML：我从JakeArchibald的文章中学到了这个方法。在ChromeDevTools中，检查SVG并选择元素，您会注意到它末尾旁边的==$0，保持选中状态，将其移动到控制台并编写以下脚本。$0.getTotalLength()//139.46$0是一种从DOM中选择元素的快速方法，无需执行以下操作：这是此示例上下文中的快速提示。现在我们有了长度，我们可以用它做任何我们想做的事。例如，我们可以在悬停时为其设置动画。.c-section__title--虚线路径{stroke-dasharray:139;笔画偏移量：0；transition:0.7s;}.c-section__title--dashed:hoverpath{stroke-dashoffset:139;}代码演示地址：https://codepen.io/shadeed/pen/xxXmyWE或者我们可以简单的做成虚线（在这种情况下，我们真的不需要知道路径长度）。使用SVG自定义链接下划线我们可以使用SVG创建自定义链接下划线来激发快乐，几年前我创建了一个脚本，它随机生成一条路径并在悬停时重绘它。这是前后预览：我们的想法是为每个链接插入一个SVG，如下所示：魔法是通过改变d属性的值来实现的。这是一个视觉效果，显示了路径的实际绘制方式。代码演示地址：https://codepen.io/shadeed/pen/OeNbMOCustomSVGTapeEffects在做客户项目时，我需要一种方法来将磁带附加到部分内容，可以使用CSS将其放置在任何位置，并且足够动态只用一个CSS变量改变它的颜色。效果如下：在Adob??eIllustrator中，我将胶带分为几层：Base：使用填充颜色TransparentBlack：显示较暗的区域TransparentWhite：显示较亮的区域让我们看一下SVG代码。请注意，我添加了fill=currentColor。currentColor关键字将继承CSScolor属性的值，以便我们可以仅使用一个属性动态更改颜色。鉴于我们有一个纯色的底色，以及用于亮区和暗区的另外两层，更改颜色将导致胶带看起来不同。更好的是，我们可以将SVG转换为模板，并从请注意我是如何通过
