csswg-drafts icon indicating copy to clipboard operation
csswg-drafts copied to clipboard

[css-zoom] CSS Zoom and SVG

Open progers opened this issue 1 year ago • 0 comments

Should CSS zoom be supported in SVG? Below are some examples:

<svg width="100" height="100" style="background: #006AA7;">
  <!-- zoom affecting css properties -->
  <rect style="x: 5px; y: 5px; width: 40px; height: 5px; fill: #fecc0284; zoom: 2;" />

  <!-- zoom affecting geometry properties -->
  <rect x="5" y="15" width="40" height="5" fill="#fecc0284" style="zoom: 2;" />

  <!-- nested zoom and geometry properties -->
  <g style="zoom: 2">
    <rect x="5" y="25" width="40" height="5" fill="#fecc0284" />
  </g>

  <!-- zoom affecting geometry attributes -->
  <line x1="5" y1="37.5" x2="45" y2="37.5" stroke-width="5" stroke="#fecc0284" style="zoom: 2;"/>
</svg>

For historical reasons, Blink and Webkit currently implement zoom as an additional transform at the SVG root, and ignore zoom inside SVG.

CSS spec questions:

SVG spec questions:

  • Should <length> attributes (e.g., x1) be affected by zoom? Yes, for consistency with styles (requires spec update)?
  • Should getBBox be affected by zoom? No, as the spec intends it to be a local value which is not affected by transform (requires spec update)?
  • Should getCTM be affected by zoom? Yes, as it should be used with getBBox to get a rect in the root coordinate space (requires spec update)?

cc: https://github.com/w3c/csswg-drafts/issues/5623 @chrishtr @emilio @szager-chromium

progers avatar Jun 24 '24 21:06 progers