Supported SVG Tags in LWC

同学们，今天咱们来看一个和安全相关的重要知识点——在 Lightning Web Components 中，SVG 标记的使用是有严格限制的。这主要是为了保护你的应用，避免遭受 XSS 跨站脚本攻击。 先说说为什么要有这个限制。你可能知道，SVG 是一种矢量图形格式，但它不只是画图用的，里面还能嵌入脚本、事件处理程序这类东西。如果攻击者在图片里藏了恶意脚本，你的页面就危险了。所以，LWC 只允许一个安全的 SVG 标签子集，在渲染时会自动过滤掉那些不安全的部分。 那哪些标签是允许的呢？你放心，常见的绘图需求全都覆盖到了。比如容器元素，像 svg、g、defs、symbol、use 这些，都是组织图形结构的基础。基本形状方面，圆、椭圆、直线、路径、多边形、矩形，这些画图最常用的标签都没有问题。文本元素，像 text、tspan、tref、title、desc，还有 altGlyph 这类修饰文字的，也都可以用。渐变和图案，比如 linearGradient、radialGradient、stop、pattern、marker、mask、filter，这些能让画面更丰富。如果你想插入图像或者媒体，image、audio、video、canvas 也都支持。连动画相关的 animateColor、animateMotion、animateTransform、mpath，以及字体相关的 font、glyphRef、hkern、vkern，全在允许的范围内。基本上，你日常开发中能想到的 SVG 用法，这里都为你保留好了。 那到底什么东西被禁止了呢？很简单，所有跟脚本和外部交互有关的高风险标签。比如 script、foreignObject、iframe，还有像 onclick 这样的事件处理程序属性，统统都会被 LWC 的安全引擎识别，并从 SVG 内容中自动删除。这样一来，哪怕有人上传了一份精心构造的恶意图片，里面藏着攻击代码，到了你的组件里，不安全的部分早就被清理干净了，根本没有执行的机会。 你可以把这个机制理解成一道自动安检门，有用的图形部分请进，危险的代码部分直接扔掉。这样你就可以放心地在组件里使用 SVG 图标、插图甚至动画，而不用额外操心安全问题。只要你在 LWC 里写的 SVG 只用这些被允许的标签，一切都会很顺畅。 好了，关于 SVG 安全限制我们就讲这么多，是不是很简单？关键是记住：LWC 帮你把好了安全关，你专心画图就行。