Positioning an SVG image element in an SVG html item
<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>