如何嵌入独立SVG代码？解决样式类覆盖问题

这确实是内联SVG样式的典型冲突问题——页面里的<style>规则是全局生效的，哪怕放在不同的SVG标签里，后定义的样式也会覆盖前面的，导致所有线条都变成最后设置的颜色。下面给你几个比iframe更轻量的解决方案，按推荐优先级排序：

1. 给每个SVG生成唯一的样式类名 #

这是最直接且性能最优的方案，核心思路是让每个SVG的样式类不重名，从根源避免冲突。你可以给line函数加一个计数器或者生成唯一ID来创建类名：

// 用计数器生成唯一类名，也可以用UUID库生成更随机的名称
let lineClassId = 0;
function line(color) {
  const uniqueClass = `line-style-${lineClassId++}`;
  return `
<svg width="100" height="100">
  <style> .${uniqueClass} { stroke: ${color}; stroke-width: 2; } </style>
  <line class="${uniqueClass}" x1="0" y1="0" x2="100" y2="100" />
</svg>
  `.trim();
}

调用line('red')和line('blue')后，每个SVG的类名分别是line-style-0和line-style-1，样式完全独立，直接把生成的SVG代码插入页面即可，没有额外性能开销。

2. 使用内联样式代替