Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVG attributes format

See original GitHub issue

Not sure if this an issue or a clarification. If I have some SVG, such as <path d="M 2 50 A 48 48 0 0 1 50 2" stroke="#gradLeft-1" strokeWidth="4" fill="none" /> It doesn’t work correctly. If I change ‘strokeWidth’ to ‘stroke-width’ (changed to lower case with a dash) then it does work ok. This is different to react. Is this behaviour correct? or have I done something wrong?

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:5 (1 by maintainers)

Top GitHub Comments

1reaction

SukkaWcommented, Dec 10, 2021

Ah yeah this looks like an issue. In preact it’s more common to use the attribute names, but we do officially support both. We’ll need to convert them 😃

react-dom has a file possibleStandardNames.js that can be used to normalize attributes:

https://github.com/facebook/react/blob/ca106a02d1648f4f0048b07c6b88f69aac175d3c/packages/react-dom/src/shared/possibleStandardNames.js

cc @developit

1reaction

nrandellcommented, Feb 17, 2017

Great - good to know I wasn’t being stupid!

Top Results From Across the Web

SVG Attribute reference - SVG: Scalable Vector Graphics | MDN

Below is a list of all of the attributes available in SVG along with links to reference documentation to help you learn which...

Document Structure — SVG 2

The 'refX' and 'refY' attributes define the reference point of the symbol which is to be placed exactly at the symbol's x,y positioning...

SVG Tutorial - W3Schools

SVG defines vector-based graphics in XML format. ... SVG defines the graphics in XML format; Every element and every attribute in SVG files...

SVG Elements and Attributes - O'Reilly Design System

Format is a list of property-name: property-value; pairs. The final ; in a list is optional. Whitespace is optional before and after property...

SVG Properties and CSS

SVG CSS Properties · Text properties · Clip properties · Masking properties · Filter effects · Gradient properties · Interactivity properties · Color ......