mdn/content

"SVGSVGElement.viewBox.baseVal": when viewBox unset, it is null in FF but a 0-SVGRect in Chrome

Open

#8.907 geöffnet am 14. Sept. 2021

Auf GitHub ansehen
 (0 Kommentare) (0 Reaktionen) (0 zugewiesene Personen)Markdown (22.427 Forks)batch import
Content:WebAPIhelp wantedneeds BCD update

Repository-Metriken

Stars
 (8.900 Stars)
PR-Merge-Metriken
 (Durchschn. Merge 7T 3h) (147 gemergte PRs in 30 T)

Beschreibung

MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/SVGAnimatedRect/baseVal

What information was incorrect, unhelpful, or incomplete?

There are differences between the browsers implementation of the initial values of the viewBox (baseVal) property.

const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
const baseVal = svg.viewBox.baseVal;

In Firefox baseVal is null. In Chrome it is an SVGRect {x: 0, y: 0, width: 0, height: 0}. In my opinion it is nice to just write the values on the pre-initialized SVGRect and to let the browser synchronize the attribute.

Since the bug on this topic (https://bugzilla.mozilla.org/show_bug.cgi?id=888307) is closed and no one seems to care, at least developers should be informed of this difference.

I am not sure if this should be a "note" in the compability table, or if it should be described in the property section. I am aware that this property is inherited from SVGFitToViewBox, but there is no page for this Interface. Since this is my first contribution I don't feel ready to create a new Page.

Specific section or headline?

new Property section named "viewBox" OR a note in the compability table (see above)

What did you expect to see?

  1. There is the viewBox property which is an SVGAnimatedRect {baseVal: SVGRect|null, animVal: SVGRect|null}
  2. changes to the baseVal property are reflected in the viewBox attribute and vice-versa
  3. If the attribute is not set (null),
  4. the property is null in Firefox
  5. the property is SVGRect {x: 0, y: 0, width: 0, height: 0} in Chrome

Did you test this? If so, how?

to test this the code from above can be executed in the browsers console

Contributor Guide