Keep Aspect

This plugin add the method .keepAspect() to line and text object. When the SVG is resized this method allows keeping the initial stroke size for lines and the font size for texts. The plugin transform lines and texts and keep initial aspect.

The plugin is loaded with:

import gySVG      from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';
import keepAspect from 'https://cdn.graphery.online/svg/1.0.0/module/keep-aspect.plugin.js';
gySVG.extend (keepAspect);

When the SVG is resized, the line element keeps the stroke dimension referred to the initial viewBox. The line length change with the new dimensions.

When the SVG is resized, the text element keeps the initial height and width. As a result, it keeps its aspect. The text is displayed in a new position, but with same size.

import gySVG      from 'https://cdn.graphery.online/svg/1.0.0/module/index.js';
import keepAspect from 'https://cdn.graphery.online/svg/1.0.0/module/keep-aspect.plugin.js';
gySVG.extend (keepAspect);
const svg    = gySVG ().viewBox (0, 0, 202, 202).preserveAspectRatio ('none')
    .width ('100%').height ('100%');
const gLines = svg.add ('g').style.stroke ('#c0c0c0');
const gText  = svg.add ('g').style.stroke ('none').style.fontFamily ('sans-serif').style.fontSize (
    10);
for (let column = 0; column < 10; column++) {
  const lv = gLines.add ('line').x1 ((column * 20) + 1).x2 ((column * 20) + 1).y1 (1).y2 (201).keepAspect ();
  for (let row = 0; row < 10; row++) {
    if (column === 0) {
      const lh = gLines.add ('line').x1 (1).x2 (201).y1 ((row * 20) + 1).y2 ((row * 20) + 1).keepAspect ();
    }
    const t = gText.add ('text').text_anchor ('middle').alignment_baseline ('middle')
        .x ((column * 20) + 12).y ((row * 20) + 12).content ((row * 10) + column + 1).keepAspect ();
  }
}
const lf1 = gLines.add ('line').x1 (201).x2 (201).y1 (1).y2 (201).keepAspect ();
const lf2 = gLines.add ('line').x1 (1).x2 (201).y1 (201).y2 (201).keepAspect ();
svg.attachTo ('#example-02');