fix: render SVG attributes with correct namespace

Author: Varixo

.changeset/open-beds-grab.md

@@ -0,0 +1,5 @@
+---
+'@qwik.dev/core': patch
+---
+
+fix: render SVG attributes with correct namespace

packages/qwik/src/core/client/vnode-diff.ts

@@ -91,7 +91,7 @@ import {
 } from './vnode';
 import { mapApp_findIndx } from './util-mapArray';
 import { mapArray_set } from './util-mapArray';
-import { getNewElementNamespaceData } from './vnode-namespace';
+import { getAttributeNamespace, getNewElementNamespaceData } from './vnode-namespace';
 import { isSignal } from '../reactive-primitives/utils';
 import type { Signal } from '../reactive-primitives/signal.public';
 import { executeComponent } from '../shared/component-execution';
@@ -673,6 +673,14 @@ export const vnode_diff = (
 
         value = serializeAttribute(key, value, scopedStyleIdPrefix);
         if (value != null) {
+          if (vNewNode![VNodeProps.flags] & VNodeFlags.NS_svg) {
+            // only svg elements can have namespace attributes
+            const namespace = getAttributeNamespace(key);
+            if (namespace) {
+              element.setAttributeNS(namespace, key, String(value));
+              continue;
+            }
+          }
           element.setAttribute(key, String(value));
         }
       }

packages/qwik/src/core/client/vnode-namespace.ts

@@ -1,5 +1,12 @@
 import { isDev } from '@qwik.dev/core/build';
-import { HTML_NS, MATH_NS, Q_PROPS_SEPARATOR, SVG_NS } from '../shared/utils/markers';
+import {
+  HTML_NS,
+  MATH_NS,
+  Q_PROPS_SEPARATOR,
+  SVG_NS,
+  XLINK_NS,
+  XML_NS,
+} from '../shared/utils/markers';
 import { getDomContainerFromQContainerElement } from './dom-container';
 import {
   ElementVNodeProps,
@@ -293,3 +300,22 @@ interface NewElementNamespaceData {
   elementNamespace: string;
   elementNamespaceFlag: number;
 }
+
+export function getAttributeNamespace(attributeName: string): string | null {
+  switch (attributeName) {
+    case 'xlink:href':
+    case 'xlink:actuate':
+    case 'xlink:arcrole':
+    case 'xlink:role':
+    case 'xlink:show':
+    case 'xlink:title':
+    case 'xlink:type':
+      return XLINK_NS;
+    case 'xml:base':
+    case 'xml:lang':
+    case 'xml:space':
+      return XML_NS;
+    default:
+      return null;
+  }
+}

packages/qwik/src/core/shared/utils/markers.ts

@@ -51,10 +51,15 @@ export const QContainerSelector =
   QContainerValue.TEXT +
   '])';
 
+// Node namespaces
 export const HTML_NS = 'http://www.w3.org/1999/xhtml';
 export const SVG_NS = 'http://www.w3.org/2000/svg';
 export const MATH_NS = 'http://www.w3.org/1998/Math/MathML';
 
+// Attributes namespaces
+export const XLINK_NS = 'http://www.w3.org/1999/xlink';
+export const XML_NS = 'http://www.w3.org/XML/1998/namespace';
+
 export const ResourceEvent = 'qResource';
 export const RenderEvent = 'qRender';
 export const TaskEvent = 'qTask';

packages/qwik/src/core/tests/render-namespace.spec.tsx

@@ -7,7 +7,14 @@ import {
   Fragment,
   type JSXOutput,
 } from '@qwik.dev/core';
-import { HTML_NS, MATH_NS, QContainerAttr, SVG_NS } from '../shared/utils/markers';
+import {
+  HTML_NS,
+  MATH_NS,
+  QContainerAttr,
+  SVG_NS,
+  XLINK_NS,
+  XML_NS,
+} from '../shared/utils/markers';
 import { QContainerValue } from '../shared/types';
 
 const debug = false; //true;
@@ -346,6 +353,44 @@ describe.each([
         </svg>
       );
     });
+
+    describe('xlink and xml namespaces', () => {
+      it('should render xlink:href and xml:lang', async () => {
+        const SvgComp = component$(() => {
+          return (
+            <svg xmlns="http://www.w3.org/2000/svg" xlink:href="http://www.w3.org/1999/xlink">
+              <g>
+                <mask id="logo-d" fill="#fff">
+                  <use xlink:href="#logo-c"></use>
+                </mask>
+              </g>
+              <text xml:lang="en-US">This is some English text</text>
+            </svg>
+          );
+        });
+        const { vNode, document } = await render(<SvgComp />, { debug });
+        expect(vNode).toMatchVDOM(
+          <Component>
+            <svg xmlns="http://www.w3.org/2000/svg" xlink:href="http://www.w3.org/1999/xlink">
+              <g>
+                <mask id="logo-d" fill="#fff">
+                  <use xlink:href="#logo-c"></use>
+                </mask>
+              </g>
+              <text xml:lang="en-US">This is some English text</text>
+            </svg>
+          </Component>
+        );
+
+        const useElement = document.querySelector('use');
+        const xLinkHref = useElement?.attributes.getNamedItem('xlink:href');
+        expect(xLinkHref?.namespaceURI).toEqual(XLINK_NS);
+
+        const textElement = document.querySelector('text');
+        const xmlLang = textElement?.attributes.getNamedItem('xml:lang');
+        expect(xmlLang?.namespaceURI).toEqual(XML_NS);
+      });
+    });
   });
 
   describe('math', () => {