1787374 - SVG geometric property set in CSS should not require a unit

Status: RESOLVED INVALID

(Core :: SVG, defect)

Description

[Christopher Kirk-Nielsen]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:104.0) Gecko/20100101 Firefox/104.0

Steps to reproduce:

1. Create a 100x100px SVG with a <circle> element with r="10", cx="50", and cy="25" properties to place it.
2. Create a CSS rule to change the value of cx to 75 when the SVG is hovered, as a unitless value like initially declared in the element
3. Hover the SVG to trigger the property change.

DEMO: https://codepen.io/chriskirknielsen/pen/rNdgJOB (left is unitless, right is with pixels)

Actual results:

The computed value for the geometric property set in CSS is seemingly 0, moving the circle to that position.

Expected results:

The circle should move to the position defined in the CSS rule.

Platform: macOS 12.4
Chrome 104: OK
Safari 15.5: OK

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::SVG' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Robert Longson [:longsonr]]

The CSS specification says that all lengths or percentages other than 0 require units.

Comment 3

[Christopher Kirk-Nielsen]

(In reply to Robert Longson [:longsonr] from comment #2)

The CSS specification says that all lengths or percentages other than 0 require units.

Given this affects SVG elements and their properties, wouldn't this be an exception that should behave as SVG expects it, not CSS? Chrome and Safari handle this as expected, Firefox should as well.

Comment 4

[Robert Longson [:longsonr]]

I'm afraid not. calc doesn't really work too well, unless you insisit on units for calc.

Comment 5

[Christopher Kirk-Nielsen]

I know it's for legacy reasons but if it works on line-height, could it not be applied to SVG geometric properties as well? Unless I misunderstand you, in which case I apologise!