React-PDF渲染MathJax生成的SVG时Path元素变形问题

我用MathJax生成LaTeX对应的SVG，再通过d3.js将SVG XML转为JSX，最终用react-pdf的BlobProvider生成PDF。但PDF里的SVG Path元素出现异常：描边宽度改变、部分路径方向错误。网页直接嵌入该SVG显示正常，其他SVG渲染器也能正确解析Path，只有react-pdf生成的PDF出问题，LaTeX上方的普通文本不受影响，仅Path元素失效。

正确渲染效果：

PDF渲染异常效果：

转换代码 #

export const SVGTransformer: React.FC<Props> = ({ xml }) => {
  if (!xml || xml === '') return <Text />;

  const parsed: RootNode = parse(xml);

  return transformSVGToJSX(parsed.children[0]);
};


const getPDFComponent = (tagName: string, properties: Record<string, string | number> | undefined) => {
  let Component;
  let props = getProps(properties);

  switch (tagName.toUpperCase()) {
    case 'SVG':
      Component = Svg;
      break;
    case 'G':
      Component = G;
      break;
    case 'LINE':
      Component = Line;
      props = {
        x1: 0,
        x2: 0,
        y1: 0,
        y2: 0,
        ...props,
      };
      break;
    case 'TEXT':
    case 'TSPAN':
    case 'TITLE':
      Component = Tspan;
      break;
    case 'PATH':
      Component = Path;
      break;
    case 'RECT':
      Component = Rect;
      break;
    case 'IMAGE':
      Component = Image;
      props = {
        x: 0,
        y: 0,
        ...props,
        src: props[StudentReportSVGClass.IMAGE_SRC_ACCESSOR], // Need to transform this, as src does not work in d3.js
        style: {
          width: props.width,
          height: props.height,
        },
      };
      break;
    case 'DEFS':
      Component = Defs;
      break;
    default:
      throw new Error(`Unsupported type ${tagName}`);
  }

  return {
    Component,
    props,
  };
};

const transformSVGToJSX = (node: TextNode | ElementNode | string): React.ReactElement | null => {
  if (typeof node === 'string') {
    return <Text key={Math.random()}>{removeLineBreaks(node)}</Text>;
  }

  if (!isElementNode(node)) {
    return <Text key={Math.random()}>{removeLineBreaks(node.value)}</Text>;
  }

  const elementNode = node as ElementNode;
  const { tagName, properties, children } = elementNode;

  // Proceed with normal processing for other elements
  const { Component, props } = getPDFComponent(tagName, properties);
  if (!Component) return null;

  if (children && children.length > 0) {
    return (
      <Component key={Math.random()} {...props}>
        {children.map((child, index) => transformSVGToJSX(child))}
      </Component>
    );
  }

  return (
    <Component key={Math.random()} {...props}>
      {elementNode.value}
    </Component>
  );
};

问题修复方案 #

• 标准化Path指令：MathJax生成的SVG路径包含大量相对指令（如l、m），react-pdf解析这类指令时易出现坐标偏差。使用svg-path-properties库将所有相对指令转为绝对指令（L、M）后再传入Path组件。
• 显式绑定描边属性：修改getPDFComponent的PATH分支，强制将原SVG的描边属性映射到react-pdf的Path组件参数，避免默认值覆盖：

  case 'PATH':
    Component = Path;
    props = {
      ...props,
      strokeWidth: properties?.['stroke-width'] || 1,
      strokeLinecap: properties?.['stroke-linecap'] || 'butt',
      strokeLinejoin: properties?.['stroke-linejoin'] || 'miter',
      fill: properties?.fill || 'none',
    };
    break;
  

• 替换随机Key：当前用Math.random()作为组件Key，会导致渲染不稳定，改用节点ID或索引作为Key。
• Fallback方案：若上述方法无效，先将SVG转为PNG图片（用html2canvas工具），再通过react-pdf的Image组件渲染，绕过路径解析问题。

内容的提问来源于stack exchange，提问作者Romen Medina Beltrán