Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <h2>Short answer</h2> <p>When typing the transformation matrix params in Inkscape, make sure you have "Edit current matrix" checked, since if you apply a new transformation matrix to an object, you're actually multiplying this new matrix with the existing transformation matrix of the object, so make sure you edit it instead.<br> <img src="https://i.stack.imgur.com/QTusy.png" alt="enter image description here"></p> <h2>Long Answer</h2> <p>How to recalculate everything yourself. </p> <p>First let us try and understand the transformation matrices a bit. A transformation matrix is a quick and clever tool for applying affine transformations ( transformation which preserves straight lines) to a vector.<br> So, if you have a vector (say, 2d coordinates) and a transformation matrix, and multiply the two together, you will end up with transformed coordinates, with the transformations defined in the transformation matrix, applied.<br> <img src="https://i.imgur.com/GgSlWtt.png" alt="transformation matrix"><br> Calculating <code>x'</code> and <code>y'</code> is done like so:</p> <pre><code>x' = a*x + c*y + e y' = b*x + d*y + f </code></pre> <p>Next, we need to understand the svg format a bit.<br> According to the <a href="http://www.w3.org/TR/SVG/expanded-toc.html" rel="noreferrer" title="w3c svg spec">w3c svg spec</a> the <code>matrix</code> transform takes exactly those 6 parameters (a,b,c,d,e,f) as arguments.<br> Therefore, from your example, </p> <pre><code>&lt;g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)"&gt; </code></pre> <p>we have the following transformation matrix params:</p> <pre><code>a=0.443 b=0.896 c=-0.896 d=0.443 e=589.739 f=-373.223 </code></pre> <p>Now, if we have the following example coordinate: <code>x=27, y=-9</code>, we can transform it, by using the previously defined transformation matrix like this:</p> <pre><code>x' = a*x + c*y + e x' = 0.443*27 + -0.896*-9 + 589.739 x' = 609.764 y' = b*x + d*y + f y' = 0.896*27 + 0.443*-9 -373.223 y' = −353.018 </code></pre> <p>Neat, huh? You can get more info <a href="http://www.w3.org/TR/SVG/coords.html#TransformMatrixDefined" rel="noreferrer">here</a></p> <p>But that is not all. We also need to understand svg path data.<br> According to the <a href="http://www.w3.org/TR/SVG/paths.html#PathDataGeneralInformation" rel="noreferrer">w3c svg path dspecification</a> each letter in the path data represents an instruction. And each of the number pairs that follow an instruction represent a coordinate value. </p> <p>From your example, we have the following path:</p> <pre><code>&lt;path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" /&gt; </code></pre> <p>Here we see that this path object uses one absolute <code>moveto</code> instruction (uppercase <strong>M</strong>), a relative <code>smooth curveto</code> cubic Bézier curve (lowercase <strong>s</strong>), a relative <code>lineto</code> instruction (lowercase <strong>l</strong>), and another relative <code>smooth curveto</code> cubic Bézier curve instruction, followed by a <code>closepath</code> instruction (lowercase <strong>z</strong>). </p> <p><code>M486,313</code> is translated to <em>absolute moveto x=486, y=313</em><br> <code>s27-9,43-29</code> is a bit more complicated to read because some comas are omitted because they're not needed if the negative number is negative, so the minus sign acts as a coma - anyways, it translates to <em>relative smooth bezier curveto x=27, y=-9, x=43, y=-29</em> (one destination point and one control point)<br> And so on.</p> <p>So, how do we apply and remove the transformation matrix from your svg group? Like so:</p> <pre><code>// we read the transformation matrix params // &lt;g transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)"&gt; a=0.443 b=0.896 c=-0.896 d=0.443 e=589.739 f=-373.223 // we read the path data, and transform each instruction // &lt;path d="M486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" /&gt; </code></pre> <p><strong>M486,313</strong> Absolute move to </p> <pre><code>x' = a*x + c*y + e = a*486 + c*313 + e = 524.589 y' = b*x + d*y + f = b*486 + d*313 + f = 200.892 </code></pre> <p>Move to instruction is now <strong>M524.589,200.892</strong></p> <p><strong>S27-9,43-29</strong> - smooth curveto, repeat the same process for each coordinate, but set the <code>e</code> and <code>f</code> (translation parameters) to 0, since it's a relative instruction not an absolute.<br> It is now<br> <strong>s20.025,20.205,45.033,25.680999999999997</strong></p> <p><strong>l26,4,1,23-22,5</strong><br> will become<br> <strong>l7.934000000000001,25.067999999999998,-20.165,11.085,-14.226,-17.497</strong></p> <p><strong>s-25-6-48-3</strong><br> will become<br> <strong>s-5.698999999999999,-25.058000000000003,-18.576,-44.337</strong></p> <p>And <strong>z</strong> will remain <strong>z</strong> </p> <p>So the resulting transformed path will be:</p> <pre><code>&lt;path d="M524.589,200.892s20.025,20.205,45.033,25.680999999999997l7.934000000000001,25.067999999999998,-20.165,11.085,-14.226,-17.497s-5.698999999999999,-25.058000000000003,-18.576,-44.337z" /&gt; </code></pre> <p>I hope this makes sense to you.</p>
    singulars
    1. This table or related slice is empty.
    1. POFlattening SVG matrix transforms in Inkscape
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USArtBIT
    1. USArtBIT
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POFlattening SVG matrix transforms in Inkscape
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThat's an excellent answer, thanks! It'll take me a while to digest the process for applying the transformations manually. In the meantime, when I set the "Edit current matrix" flag in Inkscape, it now does give the correct visual result - however, when I save the SVG file (either as standard Inkscape or optimized) it saves with the transform as a separate attribute instead of applied to the path values. I have "Store transformation" set to Optimized in Preferences. How do I get it to collapse the transformation into the path? Thanks!
      singulars
      1. PO
      1. USTom Hall
    2. CO@TomHall make sure you ungroup your objects (Object->Ungroup or <SHIFT+CTRL+G>) and save as optimized .svg
      singulars
      1. PO
      1. USArtBIT
    3. COBut the SVG file I am operating on as a test only has a single path node directly inside the SVG node (the path from my question). So the process is: I open it, apply the transform with Edit current matrix ticked and Store transformation set to Optimized, then try doing Ungroup, then save as an optimized SVG. But it saves with the transform added like so: <path d="m486,313s27-9,43-29l26,4,1,23-22,5s-25-6-48-3z" transform="matrix(0.443,0.896,-0.896,0.443,589.739,-373.223)"/> Sorry to be obtuse, what am I doing wrong?
      singulars
      1. PO
      1. USTom Hall
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload