Last active
August 15, 2022 23:20
Revisions
-
fospathi revised this gist
Apr 18, 2018 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 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) -
fospathi revised this gist
Apr 17, 2018 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 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. <!-- 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%"> -
fospathi revised this gist
Apr 17, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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. <!-- 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%"> -
fospathi revised this gist
Apr 17, 2018 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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 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. -
fospathi created this gist
Apr 17, 2018 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal 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>