Need to transform camelCased svg attributes to kebab-case for SVG elements to display properly

[billneff79]

React camelCases all but the data-* and aria-* html attributes, including on SVG elements: https://facebook.github.io/react/docs/dom-differences.html.

preact-compat nor preact-svg do not translate any React camelCased attributes to htmls kebab-case. This isn't a problem with normal html elements, as there are only a couple, accept-charset for <form> elements and http-equiv for the <meta> elements. It's unlikely preact/React would be used in the meta tag, but http-equiv in form might be used. Could be something to look into.

However, the bigger issue is svg which has lots of kebab-cased attributes based on CSS properties (e.g. strokeWidth => stroke-width). React svg code simply won't style properly as-is without transforming these to dash-case.

[billneff79]

In case you needed a map, here is a list of all kebab-cased svg attributes (not there are some camelCased attributes in SVG, so you can't just translate all camelCased attributes in svg nodes to kebab-case). React doesn't support all svg attributes, but if you map this list below to kebab-case equivalents, then you should be OK as a superset of what you would ever see from React. https://facebook.github.io/react/docs/tags-and-attributes.html

accent-height
alignment-baseline
arabic-form
baseline-shift
cap-height
clip-path
clip-rule
color-interpolation
clip-path
clip-rule
color-interpolation
color-interpolation-filters
color-profile
color-rendering
fill-opacity
fill-rule
flood-color
flood-opacity
font-family
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-weight
glyph-name
glyph-orientation-horizontal
glyph-orientation-vertical
horiz-adv-x
horiz-origin-x
marker-end
marker-mid
marker-start
overline-position
overline-thickness
panose-1
paint-order
stop-color
stop-opacity
strikethrough-position
strikethrough-thickness
stroke-dasharray
stroke-dashoffset
stroke-linecap
stroke-linejoin
stroke-miterlimit
stroke-opacity
stroke-width
text-anchor
text-decoration
text-rendering
underline-position
underline-thickness
unicode-bidi
unicode-range
units-per-em
v-alphabetic
v-hanging
v-ideographic
v-mathematical
vert-adv-y
vert-origin-x
vert-origin-y
v-alphabetic
v-hanging
v-ideographic
v-mathematical
vert-adv-y
vert-origin-x
vert-origin-y
word-spacing
writing-mode
x-height

or as a map:
{
'accent-height': 'accentHeight',
'alignment-baseline': 'alignmentBaseline',
'arabic-form': 'arabicForm',
'baseline-shift': 'baselineShift',
'cap-height': 'capHeight',
'clip-path': 'clipPath',
'clip-rule': 'clipRule',
'color-interpolation': 'colorInterpolation',
'clip-path': 'clipPath',
'clip-rule': 'clipRule',
'color-interpolation': 'colorInterpolation',
'color-interpolation-filters': 'colorInterpolationFilters',
'color-profile': 'colorProfile',
'color-rendering': 'colorRendering',
'fill-opacity': 'fillOpacity',
'fill-rule': 'fillRule',
'flood-color': 'floodColor',
'flood-opacity': 'floodOpacity',
'font-family': 'fontFamily',
'font-size': 'fontSize',
'font-size-adjust': 'fontSizeAdjust',
'font-stretch': 'fontStretch',
'font-style': 'fontStyle',
'font-variant': 'fontVariant',
'font-weight': 'fontWeight',
'glyph-name': 'glyphName',
'glyph-orientation-horizontal': 'glyphOrientationHorizontal',
'glyph-orientation-vertical': 'glyphOrientationVertical',
'horiz-adv-x': 'horizAdvX',
'horiz-origin-x': 'horizOriginX',
'marker-end': 'markerEnd',
'marker-mid': 'markerMid',
'marker-start': 'markerStart',
'overline-position': 'overlinePosition',
'overline-thickness': 'overlineThickness',
'panose-1': 'panose1',
'paint-order': 'paintOrder',
'stop-color': 'stopColor',
'stop-opacity': 'stopOpacity',
'strikethrough-position': 'strikethroughPosition',
'strikethrough-thickness': 'strikethroughThickness',
'stroke-dasharray': 'strokeDasharray',
'stroke-dashoffset': 'strokeDashoffset',
'stroke-linecap': 'strokeLinecap',
'stroke-linejoin': 'strokeLinejoin',
'stroke-miterlimit': 'strokeMiterlimit',
'stroke-opacity': 'strokeOpacity',
'stroke-width': 'strokeWidth',
'text-anchor': 'textAnchor',
'text-decoration': 'textDecoration',
'text-rendering': 'textRendering',
'underline-position': 'underlinePosition',
'underline-thickness': 'underlineThickness',
'unicode-bidi': 'unicodeBidi',
'unicode-range': 'unicodeRange',
'units-per-em': 'unitsPerEm',
'v-alphabetic': 'vAlphabetic',
'v-hanging': 'vHanging',
'v-ideographic': 'vIdeographic',
'v-mathematical': 'vMathematical',
'vert-adv-y': 'vertAdvY',
'vert-origin-x': 'vertOriginX',
'vert-origin-y': 'vertOriginY',
'v-alphabetic': 'vAlphabetic',
'v-hanging': 'vHanging',
'v-ideographic': 'vIdeographic',
'v-mathematical': 'vMathematical',
'vert-adv-y': 'vertAdvY',
'vert-origin-x': 'vertOriginY',
'vert-origin-y': 'vertOriginY',
'word-spacing': 'wordSpacing',
'writing-mode': 'writingMode',
'x-height': 'xHeight'
}