title: Positioning an SVG image element in an SVG html item
body: <p>I'm about to write some JavaScript that wraps around SVG for convenience. This code can take an SVG section of a HTML page and insert SVG items dynamically. This works quite well for rectangles and circles and these kind of shapes, but it does not work for images: Whenever I create an image item the Y position of the image is way off. X is fine: An X-value of zero renders the image left aligned with the SVG canvas. But it is quite strange: I require a negative Y-value for the image to align to the top of the SVG.canvas. In contrast to primitive shapes if I specify zero for Y for images these images get centered vertically within my SVG canvas. Why is that the case? What am I missing?</p>
  
  <p>The essential aspects of my code:</p>
  
  <pre><code>function __makeSVG(tag, attrs)
  {
      var el = document.createElementNS('http://www.w3.org/2000/svg', tag);
      for (var k in attrs)
          el.setAttribute(k, attrs[k]);
      return el;
  }
  </code></pre>
  
  <p>And:</p>
  
  <pre><code>function createImageXY(x, y, url) {
      var style = {};
      style["x"] = x;
      style["y"] = y;
      style["width"] = "100%";
      style["height"] = "100%";
      style["visibility"] = "visible";
      var svgItem = __makeSVG('image', style);
      svgItem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', url);
      main.appendChild(svgItem);
  }
  </code></pre>
  
  <p>And the SVG canvas in HTML is created like this:</p>
  
  <pre><code>&lt;svg id="viewport" style="stroke-width: 0px; background-color: black; width:1200px; height:800px"
  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
  &gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>More strangely: If I scale the image the vertical position will be scaled as well.</p>
  
  <p>I would like to have absolute positioning like I have for rectangles and circles and these things. A position of (100, 100) should position the image to exact (100, 100) and not somewhere else. What am I missing? How can I accomplish that?</p>