SolidJS组件中SVG的<use>元素引用id无法正常渲染的解决方法

问题场景：
将可正常渲染的SVG代码复制到SolidJS组件后，元素无法显示中定义的蓝色圆形。直接在浏览器打开SVG文件时一切正常，尝试替换href为xlinkHref、检查ID定义均无效。

原始SVG代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <defs>
    <g id="a">
      <circle cx="50" cy="50" r="10" fill="blue" />
    </g>
  </defs>
  <use href="#a" x="10" y="10" />
</svg>

SolidJS组件代码：

function MyComponent() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <defs>
        <g id="a">
          <circle cx="50" cy="50" r="10" fill="blue" />
        </g>
      </defs>
      <use href="#a" x="10" y="10" />
    </svg>
  );
}

解决方法：使用attr:前缀强制设置SVG属性 #

SolidJS的JSX默认会将属性解析为DOM属性，但SVG的<use>元素的href是SVG命名空间下的属性，直接使用会导致解析异常。需要给href属性加上attr:前缀，强制SolidJS将其作为HTML属性渲染：

function MyComponent() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <defs>
        <g id="a">
          <circle cx="50" cy="50" r="10" fill="blue" />
        </g>
      </defs>
      <use attr:href="#a" x="10" y="10" />
    </svg>
  );
}

原理说明 #

SolidJS的JSX编译器会区分DOM属性和HTML属性，对于SVG这类特殊元素的属性，需要明确告知编译器按HTML属性处理。attr:前缀是SolidJS提供的语法，用于强制将属性渲染为HTML原生属性，而非对应的DOM对象属性，这样就能让<use>正确识别同文档内的<defs>元素ID。

备选方案：直接复用组件（无需） #

如果不想使用<use>，也可以将<defs>中的元素封装为Solid组件，直接复用：

function BlueCircle() {
  return <circle cx="50" cy="50" r="10" fill="blue" />;
}

function MyComponent() {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
      <g transform="translate(10, 10)">
        <BlueCircle />
      </g>
    </svg>
  );
}

内容的提问来源于stack exchange，提问作者Jordi Cabré