React应用中SVG Logo字母B无孔洞显示异常求助

核心原因与修复方案 #

1. 调整填充规则（最常见修复） #

PNG转SVG的工具大多默认用nonzero填充规则，这种规则下如果字母B的内外路径绘制方向一致，孔洞会被当成填充区域。给SVG元素或路径添加evenodd填充规则就能解决：

• 直接修改SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" ... fill-rule="evenodd">
  <!-- 原SVG路径内容 -->
</svg>

• 或者在React组件的style中设置：

<svg 
  style={{ opacity: 0.986, fillRule: 'evenodd' }}
  xmlns="http://www.w3.org/2000/svg"
  ...
>
  {/* 路径内容 */}
</svg>

2. 修复SVG路径结构 #

部分转换工具会把字母B的内外轮廓合并成一条错误路径，导致孔洞消失。你可以手动拆分路径：

• 确保字母B的外边框和内部两个孔洞是独立的闭合路径
• 或者反转内部孔洞路径的绘制方向（比如把顺时针改成逆时针），让默认的nonzero规则能识别镂空区域

3. 重新生成SVG #

如果手动改路径太麻烦，换用更精准的转换工具（比如Inkscape、Vector Magic），这类工具能更好识别文字的镂空结构，生成原生带孔洞的SVG。

示例React组件代码 #

import React from 'react';

const AppLogo = () => {
  return (
    <svg
      width="80"
      height="80"
      viewBox="0 0 200 200"
      style={{ opacity: 0.986, fillRule: 'evenodd' }}
      xmlns="http://www.w3.org/2000/svg"
    >
      {/* 替换成你的SVG路径 */}
      <path d="M50,20 L150,20 L150,180 L50,180 Z" />
      <path d="M70,60 L130,60 L130,100 L70,100 Z" />
      <path d="M70,120 L130,120 L130,160 L70,160 Z" />
    </svg>
  );
};

export default AppLogo;

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