元素的SVG appendChild（如路径）不适用于IE

Question

我想获得一个SVG的路径元素，将其悬停时绘制为最后一个子元素。我使用了appendChild（）方法，但在IE 9,10,11中将无法使用（但在那里也不会引发任何错误）。

形状在剪裁时应为红色，在鼠标移开时应为黄色。但是在IE 中，形状会变为红色，鼠标悬停时会保持红色。在元素移至SVG代码底部之后，mouseout事件似乎丢失了。

有什么我想念的东西或如何动态实现的帮助吗？

    SQLiteDatabaseHook hook = new SQLiteDatabaseHook() {
        @Override
        public void preKey(SQLiteDatabase database) {

        }

        @Override
        public void postKey(SQLiteDatabase database) {
            database.execSQL("PRAGMA key = '" + key + "';");
            database.execSQL("PRAGMA cipher_migrate;");
        }
    };
    Database db = new EncryptedDatabase(SQLiteDatabase.openOrCreateDatabase("DB.db", key, null, hook));
    return new DaoMaster(db).newSession();

window.onload = function start() {
    var Shapes = document.getElementsByClassName('kreise');
    for (var b = 0, a = Shapes.length; b < a; b++) {
        Shapes[b].addEventListener("mouseover", up);
        Shapes[b].addEventListener("mouseout", down);
    }
}
function up() {
    var element = this;
    var parent = this.parentNode;
    parent.appendChild(this);
    element.setAttribute('class', 'kreise mouseover');
 }	

 function down() {
    var element = this;
    element.setAttribute('class', 'kreise mouseout');
 }

#shape1 {
	stroke: black;
	stroke-width: 3px;
}
#shape2 {
	stroke: blue;
	stroke-width: 3px;
}
.mouseover {
	fill:red;
}
.mouseout {
	fill: yellow;
}

Answer 1

问题与appendChild方法有关，使用此方法后，元素将被重新添加，并且将不会触发mouseout事件。尝试删除此部分代码，并使用以下代码：

window.onload = function start() {
    var Shapes = document.getElementsByClassName('kreise');
    for (var b = 0, a = Shapes.length; b < a; b++) {
        Shapes[b].addEventListener("mouseover", up);
        Shapes[b].addEventListener("mouseout", down);
    }
}
function up() {
    var element = this;
    element.setAttribute('class', 'kreise mouseover');
 }  

 function down() {
    var element = this;
    element.setAttribute('class', 'kreise mouseout');
 }

然后，它将在IE 9+上正常运行。像这样：