SVG A elements not created correctly

When using an <a> element with <Show> or <For> inside an inline SVG element, we get the namespace wrong. Example:

      <svg height="100" width="100" style={{ background: "#000" }}>
        <Show when={true}>
          <a href="https://example.org">
            <rect fill="red" x="25" y="25" height="50" width="50" />
          </a>
        </Show>
      </svg>

      <svg height="100" width="100" style={{ background: "#000" }}>
        <Show when={true}>
          <a href="https://example.org">
            <rect fill="red" x="25" y="25" height="50" width="50" />
          </a>
        </Show>
      </svg>

The namespaceUri of the "a" element is "http://www.w3.org/1999/xhtml", so it breaks the rendering of the SVG.
The desired namespaceUri would be "http://www.w3.org/2000/svg".

Here's a code sandbox showing this issue in action:

https://codesandbox.io/s/flamboyant-euclid-qy5hq4?file=/index.js:402-651

There are two copies of the same <svg> element, the first one does not use

<Show>

<Show>

and renders correctly. The second one uses

<Show>

<Show>

, and does not render the content of the

<a>

<a>

element, as the namespace of the

<a>

<a>

element is incorrect.

I'd appreciate any pointers on how to fix this!

CodeSandboxurish

flamboyant-euclid-qy5hq4 - CodeSandbox

flamboyant-euclid-qy5hq4 by urish using babel-preset-solid, solid-js

SolidJS•3y ago•

11 replies

urish

SVG A elements not created correctly

When using an <a> element with <Show> or <For> inside an inline SVG element, we get the namespace wrong. Example:

      <svg height="100" width="100" style={{ background: "#000" }}>
        <Show when={true}>
          <a href="https://example.org">
            <rect fill="red" x="25" y="25" height="50" width="50" />
          </a>
        </Show>
      </svg>

      <svg height="100" width="100" style={{ background: "#000" }}>
        <Show when={true}>
          <a href="https://example.org">
            <rect fill="red" x="25" y="25" height="50" width="50" />
          </a>
        </Show>
      </svg>

<Show>

<Show>

and renders correctly. The second one uses

<Show>

<Show>

, and does not render the content of the

<a>

<a>

element, as the namespace of the

<a>

<a>

element is incorrect.

I'd appreciate any pointers on how to fix this!

CodeSandboxurish

flamboyant-euclid-qy5hq4 - CodeSandbox

flamboyant-euclid-qy5hq4 by urish using babel-preset-solid, solid-js

SVG A elements not created correctly

Similar Threads

SVG A elements not created correctly

Similar Threads

Similar Threads

Similar Threads