Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

scadaPanel

TODO

Tips And Tricks

Resizing behaviour of an svg document within the scada display

In an svg file in the root element use the following attributes to control its resizing behaviour: width, height, viewBox, preserveAspectRatio.

1. If only width and height present, then the svg document gets an absolute size, appears in the top-left corner of the display and is never resized (not even when the display window is resized). This means it can be cut-off when the display window is too small.
2. If only viewBox and preserveAspectRatio are present, then the viewBox determines the rectangular region of the svg document that is drawn in the display window (the coordinates for the viewBox edges are the same as the coordinate system used within the svg file, usually the coordinates are in pixels). The preserveAspectRatio determines how the drawn region is sized and aligned within the display window. In this case the svg document is automatically resized when the display window is resized.

Examples:

Code Block
xml
xml

viewBox="0 0 400 400" preserveAspectRatio="xMidYMid meet"

The svg document is scaled to fit the display window and the aspect ratio is preserved.

Code Block
xml
xml

viewBox="0 0 400 400" preserveAspectRatio="none"

The svg document is scaled and stretched to fill the window (aspect ratio is not preserved).

Code Block
xml
xml

width="1200" height="700"

Only the region with coordinates 0 <= x <= 1200 and 0 <= y <= 700 pixels is shown. The svg document is not resized when the display window is resized.TODO