Canvas是位图绘制环境，所有样式（包括字体、颜色等）必须通过JavaScript显式设置，无法直接应用外部CSS；ctx.font支持部分CSS字体语法但不解析CSS变量或class，且Canvas内容不可被CSS选择器选中。
Canvas 里不能直接引入外部 CSS
Canvas 是位图绘制环境，ctx 绘图 API 不解析 HTML 或 CSS，所有样式（颜色、线宽、字体等）都必须通过 JavaScript 显式设置。试图在 <canvas> 标签上写 class 或用 <link rel="stylesheet"> 引入外部 CSS，对绘图结果完全无效。
常见错误现象：CSS 选中了 <canvas> 元素本身（比如改背景色、边框），但内部图形没变化；或误以为 fillStyle = 'var(--primary-color)' 能读取 CSS 变量——它不能，fillStyle 只接受颜色字符串、渐变或图案对象。
- 若需复用颜色/尺寸逻辑，建议用 JS 常量或 CSS 自定义属性 +
getComputedStyle主动读取，再赋值给ctx.fillStyle等 -
ctx.font支持部分 CSS 字体语法（如'bold 14px sans-serif'），但不支持font-family: var(--font-stack) - Canvas 内容不可被 CSS 选择器选中——它没有 DOM 子节点，
ctx绘出的矩形不是<div>，无法加 class 或 hover 动画
SVG 内部可引用外部 CSS，但有作用域限制
SVG 作为 XML 文档，支持 <style> 标签和外部样式表，但浏览器对 @import 和 <link> 的支持不一致，**最可靠的方式是内联 <style> 或使用 <use> + 外部 SVG 中预定义的 class**。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 外部 CSS 文件只能通过
<link rel="stylesheet" href="styles.css">插入到 HTML 文档中，再由 SVG 元素继承部分样式（仅限于继承属性，如color、font-size）；SVG 自身元素（<circle>、<text>）不会自动应用 HTML 中为div写的.icon { fill: blue; } - 若 SVG 是内联的（直接写在 HTML 里），
<style>块可放在<svg>内部，作用域默认覆盖该 SVG 下所有元素：<svg> <style> .highlight { fill: #ff6b6b; } </style> <circle class="highlight" cx="50" cy="50" r="20"/> </svg> - 若 SVG 是
<img src="icon.svg">引入的，其内部无法加载外部 CSS（沙箱限制），所有样式必须硬编码或内联在 SVG 文件里
混合场景：用 CSS 控制 SVG 容器，再透传到子元素
当 SVG 内联且需要响应式或主题切换时，可借助 CSS 自定义属性 + currentColor / inherit 实现“间接控制”。
例如：
- HTML 中设置主题：
<div class="theme-dark"> <svg viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="currentColor"/> </svg> </div> - CSS 中定义：
.theme-dark { color: #fff; } .theme-light { color: #333; } svg { width: 24px; height: auto; }此时<circle fill="currentColor">会自动取父级color值 - 注意：
fill和stroke支持currentColor，但filter、opacity等不继承，需显式声明
容易忽略的兼容性细节
SVG 的 CSS 支持度比 HTML 低，尤其老版本 Safari 和 IE 对某些特性静默失败：
-
@media查询在内联 SVG 中可用，但在<img>引入的 SVG 中无效 - CSS 动画（
@keyframes）可作用于 SVG 属性（fill、transform），但stroke-dasharray动画需配合stroke-dashoffset才能平滑，且 Firefox 对 SVG 中animation的触发时机更敏感 - 不要依赖
display: none隐藏 SVG 元素来“禁用”渲染——有些浏览器仍会计算其几何，改用visibility: hidden或移除<use>引用更稳妥 -
viewBox和preserveAspectRatio是 SVG 原生缩放控制，CSS 的width/height只影响容器，二者混用易导致意外交互（如点击区域偏移）
真正要让样式随主题/设备动态变化，优先走 JS 控制 SVG 属性或预生成多主题 SVG 字符串，而不是强依赖 CSS 级联穿透。
