canvas是位图绘制环境，所有样式（包括字体、颜色等）必须通过javascript显式设置，无法直接应用外部css；ctx.font支持部分css字体语法但不解析css变量或class，且canvas内容不可被css选择器选中。

Canvas 里不能直接引入外部 CSS

Canvas 是位图绘制环境，ctx 绘图 API 不解析 HTML 或 CSS，所有样式（颜色、线宽、字体等）都必须通过 JavaScript 显式设置。试图在 <canvas></canvas> 标签上写 class 或用 <link rel="stylesheet"> 引入外部 CSS，对绘图结果完全无效。

常见错误现象：CSS 选中了 <canvas></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 动画 <h3>SVG 内部可引用外部 CSS，但有作用域限制</h3> <p>SVG 作为 XML 文档，支持 <code><style></style> 标签和外部样式表，但浏览器对 @import 和 <link> 的支持不一致，**最可靠的方式是内联 <style></style> 或使用 <use></use> + 外部 SVG 中预定义的 class**。

  关键点：

  

  Markdown Canvas

  将Markdown文件转换为美观的HTML页面，适用于Canvas或浏览器查看。用于用户请求渲染、可视化、显示或分享Markdown文件时。

  下载
  • 外部 CSS 文件只能通过 <link rel="stylesheet" href="styles.css"> 插入到 HTML 文档中，再由 SVG 元素继承部分样式（仅限于继承属性，如 color、font-size）；SVG 自身元素（<circle></circle>、<text></text>）不会自动应用 HTML 中为 div 写的 .icon { fill: blue; }
  • 若 SVG 是内联的（直接写在 HTML 里），<style></style> 块可放在 <svg></svg> 内部，作用域默认覆盖该 SVG 下所有元素：

    <svg><style>
        .highlight { fill: #ff6b6b; }
      </style>
    <circle class="highlight" cx="50" cy="50" r="20"></circle></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"></circle></svg>
    </div>

  • CSS 中定义：

    .theme-dark { color: #fff; }
    .theme-light { color: #333; }
    svg { width: 24px; height: auto; }

    此时 <circle fill="currentColor"></circle> 会自动取父级 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></use> 引用更稳妥
  • viewBox 和 preserveAspectRatio 是 SVG 原生缩放控制，CSS 的 width/height 只影响容器，二者混用易导致意外交互（如点击区域偏移）

  真正要让样式随主题/设备动态变化，优先走 JS 控制 SVG 属性或预生成多主题 SVG 字符串，而不是强依赖 CSS 级联穿透。