JS生成带样式SVG在浏览器正常显示，其他程序不生效的解决方法

浏览器支持很多CSS扩展的SVG样式，但大部分非浏览器SVG解析器（如矢量编辑工具、看图软件）只严格遵循SVG标准的原生特性，所以要把filter: invert(1)和mix-blend-mode: color-burn替换为SVG内置元素实现。

1. 替换CSS invert滤镜为SVG原生 #

CSS的filter: invert(1)可以用SVG的<feColorMatrix>滤镜精确模拟，将其定义在SVG的<defs>中，再通过元素的filter属性引用：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <!-- 定义反转滤镜 -->
    <filter id="svgInvert">
      <feColorMatrix 
        type="matrix" 
        values="-1 0 0 0 1 
                0 -1 0 0 1 
                0 0 -1 0 1 
                0 0 0 1 0" 
      />
    </filter>
  </defs>
  <!-- 应用滤镜的元素 -->
  <rect x="20" y="20" width="160" height="160" fill="#000" filter="url(#svgInvert)" />
</svg>

这个矩阵通过对RGB通道取反（-1乘以原值）并加1（将0-1范围的颜色值反转），实现和invert(1)完全一致的效果。

2. 替换mix-blend-mode: color-burn为SVG滤镜 #

CSS的混合模式依赖浏览器的渲染上下文，非浏览器环境通常不支持元素级的mix-blend-mode属性，需要用SVG的<feBlend>滤镜模拟，同时要注意：如果是和外部背景混合，必须把背景作为SVG的一部分绘制（因为外部程序不会将自身画布作为SVG渲染的一部分）。

示例：元素与白色背景的color-burn混合 #

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="svgInvert">
      <feColorMatrix 
        type="matrix" 
        values="-1 0 0 0 1 
                0 -1 0 0 1 
                0 0 -1 0 1 
                0 0 0 1 0" 
      />
    </filter>
    <!-- 定义color-burn混合滤镜 -->
    <filter id="colorBurnBlend">
      <feBlend mode="color-burn" in="SourceGraphic" in2="BackgroundImage" />
    </filter>
  </defs>
  <!-- 绘制背景（必须作为SVG内部元素） -->
  <rect x="0" y="0" width="200" height="200" fill="#fff" />
  <!-- 同时应用反转和混合滤镜 -->
  <rect x="20" y="20" width="160" height="160" fill="#000" filter="url(#svgInvert) url(#colorBurnBlend)" />
</svg>

元素之间的color-burn混合 #

如果是两个SVG元素之间的混合，可以将它们包裹在<g>中，用滤镜将两个源合并：

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="elementColorBurn">
      <!-- 第一个源是下方的图形，第二个是上方的图形 -->
      <feBlend mode="color-burn" in="BackgroundImage" in2="SourceGraphic" />
    </filter>
  </defs>
  <g filter="url(#elementColorBurn)">
    <rect x="20" y="20" width="160" height="160" fill="#ff0000" />
    <circle cx="100" cy="100" r="60" fill="#00ff00" />
  </g>
</svg>

3. 关键注意事项 #

• 内联所有资源：确保所有滤镜、样式都直接写在SVG内部，不要依赖外部CSS文件或JS动态添加的style属性。
• 测试目标程序：不同工具对SVG特性的支持有差异（比如Illustrator支持大部分滤镜，但Figma对复杂混合模式的支持有限），如果仍有问题，可能需要将效果栅格化为位图（但会丢失矢量特性）。
• 避免CSS属性：彻底移除元素的style属性中涉及filter和mix-blend-mode的部分，改用SVG原生的filter属性和内置滤镜。

内容的提问来源于stack exchange，提问作者assembler