Skip to content

Instantly share code, notes, and snippets.

@fospathi
Last active August 15, 2022 23:20

Revisions

  1. fospathi revised this gist Apr 18, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions svg_matrix_y_flip.txt
    Original file line number Diff line number Diff line change
    @@ -3,8 +3,8 @@ you go. When positioning items in a maths or physics context however it is more
    the page like a normal coordinate system. We can provide an affine transformation matrix to a g element's transform
    attribute that flips the Y-axis for its children.

    Let the viewBox attribute of the SVG element be "0 0 w h". Suppose we want a coordinate system whose origin is at the centre
    of the viewbox and whose Y-axis points up to the top of the page.
    Let the value of the viewBox attribute of the document's SVG element equal "0 0 w h". Suppose we want a coordinate system
    whose origin is at the centre of the viewbox and whose Y-axis points up to the top of the page.

    (0, 0)
    O_ _ _ _ _ _ _ _\ X (Default SVG coordinate system/frame)
  2. fospathi revised this gist Apr 17, 2018. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions svg_matrix_y_flip.txt
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    The Y-axis in a SVG document points towards the bottom of the page, that is the Y value increases the further down the page
    The Y-axis in an SVG document points towards the bottom of the page, that is the Y value increases the further down the page
    you go. When positioning items in a maths or physics context however it is more appropriate to have the Y-axis pointing up
    the page like a normal coordinate system. We can provide an affine transformation matrix to a g element's transform
    attribute that flips the Y-axis for its children.
    @@ -38,7 +38,7 @@ matrix(1 0 0 -1 w/2 h/2).

    Consider as an example a square viewbox of length 10, that is w = h = 10.

    <!-- A SVG document -->
    <!-- An SVG document -->
    <!-- The height and preserveAspectRatio attributes are provided here just for completeness -->
    <!-- The main attributes to note are the viewBox and transform attributes on the svg and g elements respectively -->
    <svg viewBox="0 0 10 10" preserveAspectRatio="xMidYMid slice" height="100%">
  3. fospathi revised this gist Apr 17, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg_matrix_y_flip.txt
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@ matrix(1 0 0 -1 w/2 h/2).

    Consider as an example a square viewbox of length 10, that is w = h = 10.

    <!-- An SVG document -->
    <!-- A SVG document -->
    <!-- The height and preserveAspectRatio attributes are provided here just for completeness -->
    <!-- The main attributes to note are the viewBox and transform attributes on the svg and g elements respectively -->
    <svg viewBox="0 0 10 10" preserveAspectRatio="xMidYMid slice" height="100%">
  4. fospathi revised this gist Apr 17, 2018. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion svg_matrix_y_flip.txt
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    The Y-axis in an SVG document points towards the bottom of the page, that is the Y value increases the further down the page
    The Y-axis in a SVG document points towards the bottom of the page, that is the Y value increases the further down the page
    you go. When positioning items in a maths or physics context however it is more appropriate to have the Y-axis pointing up
    the page like a normal coordinate system. We can provide an affine transformation matrix to a g element's transform
    attribute that flips the Y-axis for its children.
  5. fospathi created this gist Apr 17, 2018.
    50 changes: 50 additions & 0 deletions svg_matrix_y_flip.txt
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,50 @@
    The Y-axis in an SVG document points towards the bottom of the page, that is the Y value increases the further down the page
    you go. When positioning items in a maths or physics context however it is more appropriate to have the Y-axis pointing up
    the page like a normal coordinate system. We can provide an affine transformation matrix to a g element's transform
    attribute that flips the Y-axis for its children.

    Let the viewBox attribute of the SVG element be "0 0 w h". Suppose we want a coordinate system whose origin is at the centre
    of the viewbox and whose Y-axis points up to the top of the page.

    (0, 0)
    O_ _ _ _ _ _ _ _\ X (Default SVG coordinate system/frame)
    | /
    |
    |
    | /|\ Y
    | |
    | |
    | |
    Y \|/ | _ _ _ _ _ _\ X (New coordinate system/frame)
    O /
    (w/2, h/2)

    We require a transformation that transforms coordinates in the new coordinate system frame back to coordinates in the SVG
    default standard frame. This change of frame transformation matrix, M, has six unknowns

    M = | a c e | Note that this is a shorthand version of an affine transformation matrix M = | a c e |
    | b d f | | b d f |
    | 0 0 1 |

    The first column's unknowns are the components of the unit vector describing the new X-axis direction, so (1, 0) in this
    case. The second column's unknowns are the components of the unit vector describing the new Y-axis direction, so (0, -1)
    in this case. The third column's unknowns are the coordinates of the new origin, so (w/2, h/2) in this case.

    M = | 1 0 w/2 |
    | 0 -1 h/2 |

    The SVG transform attribute accepts matrices given in the form matrix(a b c d e f), so in this case the correct form is
    matrix(1 0 0 -1 w/2 h/2).

    Consider as an example a square viewbox of length 10, that is w = h = 10.

    <!-- An SVG document -->
    <!-- The height and preserveAspectRatio attributes are provided here just for completeness -->
    <!-- The main attributes to note are the viewBox and transform attributes on the svg and g elements respectively -->
    <svg viewBox="0 0 10 10" preserveAspectRatio="xMidYMid slice" height="100%">
    <g transform="matrix(1 0 0 -1 5 5)">
    <!-- The child elements of this g element can use normal math style coordinates -->
    <!-- The origin is at the viewBox centre, the X-axis domain is -5 to 5 and the Y-axis range is -5 to 5 -->
    ...
    </g>
    </svg>