Odd Rotated Rectangle Position in SVG

Discuss SVG code, accessible via the XML Editor.
User avatar
LiquidAsh
Posts: 71
Joined: Fri Apr 22, 2011 11:35 pm
Contact:

Odd Rotated Rectangle Position in SVG

Postby LiquidAsh » Tue Jul 12, 2011 10:39 am

In writing some code to import an inkscape svg file, I'm confused by the position of a rotated rectangle (in the svg file). I'll explain the process I've gone through, and include the resulting SVG file below. If anyone can explain the position in this svg file, I'll appreciate it.

Process:
1) Create an 800x600 rectangle at position 0,0
2) Set the Stroke Width to 6 (I also gave this rectangle the title: camera, which hopefully doesn't effect anything)
2) Duplicate this rectangle, and rotate the duplicate by 60 degree (around it's center: default)
3) Save the result into an Inkscape SVG

Resulting SVG:

Code: Select all

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="800"
   height="600"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.1 "
   sodipodi:docname="cameraStart.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.21235301"
     inkscape:cx="1455.8657"
     inkscape:cy="325.97281"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     showborder="false"
     inkscape:window-width="1061"
     inkscape:window-height="577"
     inkscape:window-x="91"
     inkscape:window-y="114"
     inkscape:window-maximized="0"
     showguides="false"
     inkscape:showpageshadow="false"
     width="800px">
    <inkscape:grid
       type="xygrid"
       id="grid3757"
       empspacing="5"
       visible="true"
       enabled="true"
       snapvisiblegridlinesonly="true" />
  </sodipodi:namedview>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:none;stroke:#0000ff;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2985"
       width="794"
       height="594"
       x="2.9999983"
       y="3.0000002">
      <title
         id="title3767">camera</title>
    </rect>
    <rect
       y="199.41016"
       x="-456.80762"
       height="594"
       width="794"
       id="rect3956"
       style="fill:none;stroke:#0000ff;stroke-width:6;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       transform="matrix(0.5,-0.8660254,0.8660254,0.5,0,0)">
      <title
         id="title3958">camera</title>
    </rect>
  </g>
</svg>


Confusion:
The first rectangle position and size make sense based on the stroke width used. However the second rectangle (the one rotated by 60 degrees) has a curious position of (-456.80762, 199.41016). Can anyone help explain how this is calculated? When this rectangle is selected in inkscape, its position is shown to be (-58.710, -195.32) which makes sense as the lower-left corner of the rotated rectangle's bounding box. I just don't understand what is being written into the SVG file. Loading the file back up in multiple svg browsers, shows that everything is being preserved in the file, I'm just not sure how to interpret this position in my own importer. Thanks in advance for any help that anyone can offer.

User avatar
LiquidAsh
Posts: 71
Joined: Fri Apr 22, 2011 11:35 pm
Contact:

Re: Odd Rotated Rectangle Position in SVG

Postby LiquidAsh » Wed Jul 13, 2011 4:28 am

I think I finally cracked the code!!! Here's the process to transform a rotated svg rectangle's position to the position seen in inkscape:

1) The svg x,y coordinates of your rectangle specify the upper-left corner of the pre-transform rectangle in screen space (0,0 is upper left corner of the view and increases to the right and down). First find the center of this pre-transformed rectangle by adding (x,y) + (width,height)/2.

2) Now rotate the center of the rectangle by the specified transform (rotation).

3) Inkscape displays the lower-left corner of the bounding box's corner, so next find the offset between the rectangle's center and this lower-left bound. This can be done by filling the general rotation formula with absolute values, and then inputting the rectangle's original (width/2,height/2). This is like rotating each vertex around the center, but the absolute value only returns the largest rotated offset, ie the diagonal of your bounding box.

4) Finally convert the lower-left bound from the last step into inkscape's coordinate system by flipping y across the x-axis, and adding the document's height. This should give you the position seen in inkscape.

I hope this can be of help to anyone else experiencing this confusion.
The key to finally cracking this code (for me) was to open up some hand-written svg of rotated rectangles into inkscape.


Return to “SVG / XML Code”