SVG位置：IE 11中的绝对位置

Question

of I have an SVG object placed in a container. It has the following CSS on its class.

.container{
    position: relative;
}

.svgObj{
    position: absolute;
    top: 0;
    left: 0;
    width: 2em;
    height: 2em;
}

So, the problem is that the svg doesn't end up in 0:0 of the container but rather more like in 200px south of that.

The queer thing is that if I substiute the SVG tag for a DIV with the same class, it displays exactly where I want it to.

The problem is only apparent in IE (only tried 11, but likely there in earlier versions as well). Well, fwiw the problem is also visible in Minori. Works fine in Safari, Chrome, FF, Opera, well the bigs, except IE.

Any ideas are most welcome.

The HTML code looks like so

<div class="container">
<svg class="svgObject" data-x="0" data-y="0" data-text="My Obj"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <a id="h-72417" href="#">
        <path d="M12 4a8 0z"></path>
        <path d="M12 4a8 0-16z"></path>
    </a>
</svg>
</div>

Never mind the path values, I shortened them here to save space. It shouldn't matter. The data attributes aren't relevant either. As stated, just switching SVG for DIV and adding a "hello" instead of the paths makes it work as expected.

Thanks.

Answer 1

Thanks for answering this ceindeg , even after the fact.

For anyone else who's having this problem, an even better solution than the preserveAspectRatio attribute is to just simply make sure you have the width and height set inside the main SVG tag. Most browsers don't need them, but IE is different (of course).

Answer 2

I know this is an old question, but I came across it as I was searching for an answer to this issue myself. The solution that worked for me was to add preserveAspectRatio="xMinYMin meet" to the tag. This essentially makes the SVG responsive and shifts the contents to the top left of the SVG container.

I found the answer here: http://thenewcode.com/744/Make-SVG-Responsive