Closed chriskirknielsen closed 11 months ago
https://svgwg.org/svg2-draft/geometry.html#CX says cx
value is <length-percentage>
, which does not allow unitless. Spec change proposals aren't appropriate as Interop focus areas.
Chromium issue: https://bugs.chromium.org/p/chromium/issues/detail?id=899074
Thanks for the details @zcorpan and sorry for the misfiling!
Description
Currently, only Blink supports the ability to transform some SVG geometric properties in CSS with unitless values.
While a pixel unit is implied under the hood from my understanding (as a pixel in the non-scaled SVG canvas), it means that using a unitless value in HTML or assigning one in JavaScript cannot be also be supplied as-is to a stylesheet, and needs to be converted into a pixel value (either in script or via
calc()
in CSS).A demo of the behaviour is visible here: https://codepen.io/chriskirknielsen/pen/rNdgJOB
0
, and the bottom/cyan dot doesn't move at all due to the unitless value being ignored, so it reverts to thecx
attribute in the markup.It would be great to have consistency across all engines so that the native behaviour of SVG, accepting unitless values, extends to CSS, allowing to use the same value across markup, styles, and scripts.
Additionally, if the SVG is scaled to something other than 100%, in this example, changing the
cx
to75px
is counter-intuitive as it doesn't perform a 25px move (from the original50
). So if your SVG has aviewBox
of0 0 100 100
, but the CSS specifieswidth: 20px; height: 20px;
, moving an element to75px
would intuitively go out of the viewBox, but doesn't. While the behaviour with thepx
unit is correct, I believe allowing authors to provide a unitless value makes more sense and is more in-line with the authoring experience with SVG.I reported this as a bug for Firefox but it as rejected due to the CSS spec not allowing unitless lengths besides
0
. Given this is an SVG property, it doesn't seem outlandish to me to conform to SVG's handling of these values instead of enforcing CSS's handling.Specification
W3C
Open Issues
No response
Tests
No response
Current Implementations
Standards Positions
No response
Browser bug reports
https://bugzilla.mozilla.org/show_bug.cgi?id=1787374
Developer discussions
No response
Polls & Surveys
No response
Existing Usage
No response
Workarounds
No response
Accessibility Impact
No response
Privacy Impact
No response
Other
No response