title: SVG Rotation in 3D
body: <p>I need to rotate the paths in my SVG document around an arbitrary point in 3D.  <a href="http://www.w3.org/TR/SVG-Transforms/" rel="noreferrer">It appears that</a> there are multiple ways to do this by either using a 4x4 transformation matrix or the rotateX or rotateY transforms.  I've tried both of these methods, and neither seem to work. Are these supported anywhere?</p>
  
  <p>For my application, a bitmap is going to be the final output, so I'm not worried about browser support.  I am open to any tool--I can run a specific browser through selenium, or use a standalone SVG rasterizer.  </p>
  
  <p>This is what I've tried so far (using Google Chrome 31): </p>
  
  <p>I would expect this to be a black rectangle, rotated about the X axis, and appearing like a trapezoid.</p>
  
  <pre><code>&lt;svg version="1.1" 
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px"&gt;
  
      &lt;rect x="100" y="100" width="440" height="280" fill="#000000" 
            transform="rotateX(30 580 100)"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>(omitting <code>cy</code> and <code>cz</code> from <code>rotateX</code> gives the same result).</p>
  
  <p>I've also tried with a 4x4 matrix.  I don't see any difference from above.  I also doubt my math is correct in finding the right matrix elements.</p>
  
  <pre><code>&lt;svg version="1.1" 
       xmlns="http://www.w3.org/2000/svg" 
       xmlns:xlink="http://www.w3.org/1999/xlink" width="640px" height="480px"&gt;
  
      &lt;rect x="100" y="100" width="440" height="280" fill="#000000" 
            transform="matrix(102400 0 0 0 0 88681.00134752653 -159.99999999999997 1387899.8652473476 0 159.99999999999997 88681.00134752653 -15986.602540378442)"&gt;&lt;/rect&gt;
  &lt;/svg&gt;
  </code></pre>