title: Canvas in foreign object of svg doesn't apply the transformation
body: <p>I have a problem with the use of a canvas in svg, using foreignObject.</p>
  
  <p>The probleme is that the canvas is inserted in a group, which have a transformation (translation or rotation or scale), but the canvas isn't printed with the transformation.</p>
  
  <p>I am on Chrome.</p>
  
  <p>You can see my example there : </p>
  
  <p><a href="https://jsfiddle.net/Surre/qjrvxgos/" rel="nofollow noreferrer">https://jsfiddle.net/Surre/qjrvxgos/</a></p>
  
  <pre><code>&lt;body&gt;
    &lt;svg width="400px" height="300px" viewBox="0 0 400 300"
         xmlns="http://www.w3.org2000/svg"&gt;
         &lt;g transform='translate(250,10)rotate(40)'&gt;
           &lt;foreignObject height="700" width="370" y="0" x="0"&gt;
               &lt;span xmlns="http://www.w3.org/1999/xhtml"&gt;
               &lt;canvas id="canvas" width="400px" height="300px" fill-style="#FF0000"&gt;&lt;/canvas&gt;
               &lt;div&gt;Comment&lt;/div&gt;
               &lt;/span&gt;
           &lt;/foreignObject&gt;
         &lt;/g&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The "Comment" has the good transformation, but the canvas hasn't.
  But if you use dev tools and inspect element canvas, you will see that it's like he is in the good place, with the transformation.</p>
  
  <p>Hoping you can help me. </p>
  
  <p>Thanks</p>