Closed Bug 1787374 Opened 2 years ago Closed 2 years ago

SVG geometric property set in CSS should not require a unit


(Core :: SVG, defect)

Firefox 104





(Reporter: chriskirknielsen, Unassigned)


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: (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

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.

Component: Untriaged → SVG
Product: Firefox → Core

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

Closed: 2 years ago
Resolution: --- → INVALID

(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.

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

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!

You need to log in before you can comment on or make changes to this bug.