Title: Issue with in SVG inside SolidJS

Description: I'm trying to embed an SVG inside a SolidJS component, but I'm having issues with <use> elements. When I open the SVG file directly in the browser, the <use> elements render correctly, and the references to the defined elements inside the same document display properly. However, when I copy the SVG code and insert it inside a SolidJS component, these elements do not render correctly.

Original SVG Code:

<svg xmlns="; 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>

Code inside SolidJS:

function MyComponent() {
  return (
    <svg xmlns="; 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>
  );
}

Issue: When rendering inside SolidJS, the <use> element does not display correctly. The blue circle is not visible in the expected position. I have tried:

• Using xlinkHref instead of href.
• Ensuring the <g> id is correctly defined.

Question: How can I make SolidJS properly render <use> elements inside a component? Is there a specific way to handle <defs> and <use> inside SolidJS?

Thanks in advance!

Title: Issue with in SVG inside SolidJS

Description: I'm trying to embed an SVG inside a SolidJS component, but I'm having issues with <use> elements. When I open the SVG file directly in the browser, the <use> elements render correctly, and the references to the defined elements inside the same document display properly. However, when I copy the SVG code and insert it inside a SolidJS component, these elements do not render correctly.

Original SVG Code:

<svg xmlns="http://www.w3./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>

Code inside SolidJS:

function MyComponent() {
  return (
    <svg xmlns="http://www.w3./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>
  );
}

Issue: When rendering inside SolidJS, the <use> element does not display correctly. The blue circle is not visible in the expected position. I have tried:

• Using xlinkHref instead of href.
• Ensuring the <g> id is correctly defined.

Question: How can I make SolidJS properly render <use> elements inside a component? Is there a specific way to handle <defs> and <use> inside SolidJS?

Thanks in advance!

• html
• svg
• solid-js

Share Follow asked Mar 7 at 14:27 Jordi CabréJordi Cabré 4744 bronze badges 2

• Better posted at: github/solidjs/solid/issues – Danny '365CSI' Engelman Commented Mar 7 at 14:53
• Why not just stop using use elements? – Robert Longson Commented Mar 7 at 15:50

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

This has nothing to do with SolidJS, as the SVG is rendered as expected. It probably has nothing to do with SVG itself, either. SVG elements are rendered just like HTML elements but follow their own coordinate system and layout rules, as they belong to a different namespace.

I rendered the SVG element in both SolidJS and plain HTML — it appeared in exactly the same position in both cases. It’s possible that a style applied through another DOM element is affecting the SVG’s position.