fix(runtime): map camelCase SVG props to kebab-case attributes

src/runtime/test/svg-element.spec.tsx

@@ -74,6 +74,64 @@ describe('SVG element', () => {
     `);
   });
 
+  it('should map camelCase props to kebab-case svg attributes', async () => {
+    @Component({ tag: 'cmp-a' })
+    class CmpA {
+      render() {
+        const circleProps = { cx: 15, cy: 5, r: 3, stroke: 'green', strokeWidth: 3 };
+        return (
+          <svg viewBox="0 0 30 10">
+            <circle {...circleProps} />
+            <rect width={4} height={4} fillOpacity={0.5} />
+          </svg>
+        );
+      }
+    }
+    const { root } = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`,
+    });
+    expect(root).toEqualHtml(`
+      <cmp-a>
+        <svg viewBox=\"0 0 30 10\">
+          <circle cx=\"15\" cy=\"5\" r=\"3\" stroke=\"green\" stroke-width=\"3\"></circle>
+          <rect width=\"4\" height=\"4\" fill-opacity=\"0.5\"></rect>
+        </svg>
+      </cmp-a>
+    `);
+  });
+
+  it('should update and remove kebab-case mapped svg attributes', async () => {
+    @Component({ tag: 'cmp-a' })
+    class CmpA {
+      @Prop() strokeWidth?: number = 3;
+
+      render() {
+        return (
+          <svg viewBox="0 0 30 10">
+            <circle cx="15" cy="5" r="3" strokeWidth={this.strokeWidth} />
+          </svg>
+        );
+      }
+    }
+    const { root, waitForChanges } = await newSpecPage({
+      components: [CmpA],
+      html: `<cmp-a></cmp-a>`,
+    });
+    let circle = root.querySelector('circle');
+    expect(circle.getAttribute('stroke-width')).toBe('3');
+
+    root.strokeWidth = 5;
+    await waitForChanges();
+    circle = root.querySelector('circle');
+    expect(circle.getAttribute('stroke-width')).toBe('5');
+
+    root.strokeWidth = undefined;
+    await waitForChanges();
+    circle = root.querySelector('circle');
+    expect(circle.hasAttribute('stroke-width')).toBe(false);
+  });
+
   describe('path', () => {
     @Component({ tag: 'cmp-a' })
     class CmpA {

src/runtime/vdom/set-accessor.ts

@@ -224,6 +224,9 @@ export const setAccessor = (
         xlink = true;
       }
     }
+    if (BUILD.svg && isSvg && !xlink) {
+      memberName = mapSvgCamelCaseAttribute(memberName);
+    }
     if (newValue == null || newValue === false) {
       if (newValue !== false || elm.getAttribute(memberName) === '') {
         if (BUILD.vdomXlink && xlink) {
@@ -266,5 +269,45 @@ export const parseClassList = /*@__PURE__*/ (value: string | SVGAnimatedString |
 
   return value.split(parseClassListRegex);
 };
+/**
+ * SVG attributes that are genuinely camelCase per the SVG specification and
+ * must not be converted to kebab-case (e.g. `viewBox`, `preserveAspectRatio`).
+ */
+const SVG_CAMEL_CASE_ATTRS = /*@__PURE__*/ new Set(
+  (
+    'allowReorder attributeName attributeType autoReverse baseFrequency baseProfile calcMode clipPathUnits ' +
+    'contentScriptType contentStyleType diffuseConstant edgeMode externalResourcesRequired filterRes filterUnits ' +
+    'glyphRef gradientTransform gradientUnits kernelMatrix kernelUnitLength keyPoints keySplines keyTimes ' +
+    'lengthAdjust limitingConeAngle markerHeight markerUnits markerWidth maskContentUnits maskUnits numOctaves ' +
+    'pathLength patternContentUnits patternTransform patternUnits pointsAtX pointsAtY pointsAtZ preserveAlpha ' +
+    'preserveAspectRatio primitiveUnits refX refY repeatCount repeatDur requiredExtensions requiredFeatures ' +
+    'specularConstant specularExponent spreadMethod startOffset stdDeviation stitchTiles surfaceScale ' +
+    'systemLanguage tableValues targetX targetY textLength viewBox viewTarget xChannelSelector yChannelSelector ' +
+    'zoomAndPan'
+  ).split(' '),
+);
+
+/**
+ * Maps a camelCase SVG JSX prop name to the corresponding SVG attribute name.
+ * SVG attribute matching is case-sensitive, so `strokeWidth` must be set as
+ * `stroke-width` to take effect. Attributes that are genuinely camelCase in
+ * the SVG specification (e.g. `viewBox`) and `xml`/`xmlns` prefixed names are
+ * left unmodified.
+ *
+ * @param memberName the JSX prop name
+ * @returns the SVG attribute name to set
+ */
+const mapSvgCamelCaseAttribute = (memberName: string): string => {
+  if (!/[A-Z]/.test(memberName) || SVG_CAMEL_CASE_ATTRS.has(memberName) || /^xml/.test(memberName)) {
+    return memberName;
+  }
+  if (memberName === 'tabIndex' || memberName === 'crossOrigin') {
+    // these map to all-lowercase attribute names rather than kebab-case
+    return memberName.toLowerCase();
+  }
+
+  return memberName.replace(/([A-Z])/g, (match) => '-' + match.toLowerCase());
+};
+
 const CAPTURE_EVENT_SUFFIX = 'Capture';
 const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');

src/runtime/vdom/test/set-accessor.spec.ts

@@ -319,6 +319,46 @@ describe('setAccessor for custom elements', () => {
     expect(elm.hasAttribute('transform')).toBe(false);
   });
 
+  it('should map camelCase svg prop to kebab-case attribute', () => {
+    setAccessor(elm, 'strokeWidth', undefined, 3, true, 0);
+    expect(elm.hasAttribute('strokeWidth')).toBe(false);
+    expect(elm.getAttribute('stroke-width')).toBe('3');
+  });
+
+  it('should update camelCase svg prop as kebab-case attribute', () => {
+    elm.setAttribute('stroke-width', '3');
+
+    setAccessor(elm, 'strokeWidth', 3, 5, true, 0);
+    expect(elm.getAttribute('stroke-width')).toBe('5');
+  });
+
+  it('should remove kebab-case attribute when camelCase svg prop is removed', () => {
+    elm.setAttribute('stroke-width', '3');
+
+    setAccessor(elm, 'strokeWidth', 3, undefined, true, 0);
+    expect(elm.hasAttribute('stroke-width')).toBe(false);
+  });
+
+  it('should not map camelCase svg attributes that are camelCase in the SVG spec', () => {
+    setAccessor(elm, 'viewBox', undefined, '0 0 30 10', true, 0);
+    expect(elm.getAttribute('viewBox')).toBe('0 0 30 10');
+    expect(elm.hasAttribute('view-box')).toBe(false);
+
+    setAccessor(elm, 'preserveAspectRatio', undefined, 'xMidYMid meet', true, 0);
+    expect(elm.getAttribute('preserveAspectRatio')).toBe('xMidYMid meet');
+  });
+
+  it('should map tabIndex on svg to the lowercase attribute', () => {
+    setAccessor(elm, 'tabIndex', undefined, 0, true, 0);
+    expect(elm.getAttribute('tabindex')).toBe('0');
+    expect(elm.hasAttribute('tab-index')).toBe(false);
+  });
+
+  it('should not map camelCase props when not in an svg context', () => {
+    setAccessor(elm, 'strokeWidth', undefined, 3, false, 0);
+    expect(elm.hasAttribute('stroke-width')).toBe(false);
+  });
+
   it('should set true boolean to attribute', () => {
     const oldValue: any = 'someval';
     const newValue: any = true;