SVG位置：IE 11中的絕對位置

Question

我有一個放置在容器中的SVG對象。 它的類上有以下CSS。

.container{
    position: relative;
}

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

所以，問題是svg不會以容器的0：0結束，而更像是在200px以南。

奇怪的是，如果我為具有相同類的DIV替換SVG標簽，它會准確顯示我想要的位置。

問題只在IE中顯而易見（僅嘗試了11，但在早期版本中也可能存在）。 嗯，這個問題在Minori中也很明顯。 適用於Safari，Chrome，FF，Opera，以及除IE以外的大人物。

任何想法都是最受歡迎的。

HTML代碼看起來像這樣

<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>

別介意路徑值，我在這里縮短它們以節省空間。 沒關系。 數據屬性也不相關。 如上所述，只需切換SVG for DIV並添加“hello”而不是路徑使其按預期工作。

謝謝。

Answer 1

感謝你回答這個ceindeg ，即使事實之后。

對於遇到此問題的任何其他人來說，比preserveAspectRatio屬性更好的解決方案就是確保在主SVG標記內設置width和height 。 大多數瀏覽器不需要它們，但IE是不同的（當然）。

Answer 2

我知道這是一個老問題，但是當我在尋找這個問題的答案時，我遇到了它。 對我preserveAspectRatio="xMinYMin meet"的解決方案是在標簽中添加preserveAspectRatio="xMinYMin meet" 。 這實質上使SVG響應並將內容移動到SVG容器的左上角。

我在這里找到了答案： http ： //thenewcode.com/744/Make-SVG-Responsive