Add support for CSS viewport-percentage length units to SVG

NEW
Unassigned

Status

()

P3
enhancement
2 years ago
7 months ago

People

(Reporter: sebo, Unassigned)

Tracking

(Blocks: 1 bug)

Firefox Tracking Flags

(Not tracked)

Details

(URL)

(Reporter)

Description

2 years ago
SVG 2 defines that all units in SVG follow the description and definition of common values and units from the CSS Values and Units Module[1].

Therefore the viewport-percentage length units 'vw', 'vh', 'vi', 'vb', 'vmin' and 'vmax' should also have an effect within SVG.

There is also an issue[2] discussing to which viewport those units refer.

Sebastian

[1] https://drafts.csswg.org/css-values-3/#viewport-relative-lengths
[2] https://github.com/w3c/svgwg/issues/207
(Reporter)

Updated

2 years ago
Blocks: 1328534
Priority: -- → P3

Comment 2

10 months ago
This is a followup on https://webcompat.com/issues/12853

<svg height="100vh" width="100vw" 
     viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="40" 
     fill="red" />
</svg>


It was in Chromium (Blink) a while ago
https://bugs.chromium.org/p/chromium/issues/detail?id=368598#c11

found out also that WebKit is reporting that this is an invalid attribute BUT still applies the transformation.
In WebKit, for the implementation of viewport lengths, but not specific to SVG.
https://bugs.webkit.org/show_bug.cgi?id=27160

or maybe WebKit doesn't support it but fallback on 100% when there is a parsing error and it's why it is working. Ah no. 
<svg  id="f" style="height:10vh; width:10vw;" viewbox="0 0 100 100"> is working as expected.
You need to log in before you can comment on or make changes to this bug.