urish Posts - Answer Overflow

urish

•Created by urish on 7/23/2023 in #support

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> and renders correctly. The second one uses <Show>, and does not render the content of the <a> element, as the namespace of the <a> element is incorrect. I'd appreciate any pointers on how to fix this!

12 replies

SSolidJS

•Created by urish on 3/13/2023 in #support

Hydration fails with start-cloudflare-pages

For some reason, all the data-hk attributes in the SSR-generated page have a single number (e.g. data-hk="1", data-hk="2", ..., data-hk="88"), unlike the dev mode ssr where I get an hierarchical value such as 0-0-0-0-0-0-0-0-0-1-0-0-0-0-0-0-0-2-0-1-1-4-0-1-1-4-0-1-0-1-0 ). Seems like start-cloudflare-pages is unable to track the hierarchy while rendering the SSR page. Any pointers how to further debug this?

1 replies

Gaming

Programming