Skip to content

[css-zoom] CSS Zoom and SVG #10490

@progers

Description

@progers

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: #5623 @chrishtr @emilio @szager-chromium

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions