使用 javascript 添加 VML 元素（图像）

Question

您好，我一直在尝试使用 javascript 添加 VML 图像元素。 现在这是我用来生成这些图像的内容：

function add_tools()
{       
var elemm = document.createElement('rvml:image'); 
elemm.setAttribute('src', 'pic.png');
elemm.setAttribute('id', 'gogo');
elemm.setAttribute('class', 'rvml');
document.body.appendChild(elemm);   

document.getElementById('gogo').style.position='absolute';
document.getElementById('gogo').style.width=55;
document.getElementById('gogo').style.height=55;
document.getElementById('gogo').style.top=200;
document.getElementById('gogo').style.left=300;
document.getElementById('gogo').style.rotation=200;
document.getElementById('gogo').style.display = "block"; 
}

通常当我生成 vml 图像元素时，HTML 代码应该类似于：

<rvml:image style="POSITION:absolute; WIDTH:55px; HEIGHT:55px; TOP:0px; LEFT:0px; rotation:0;" src="pic.png" id=gogo class=rvml>

现在上面的 javascript 函数适用于 HTML 元素。 但是当我用它来生成VML元素时。生成的元素不会显示在浏览器中。但是当我检查 document.body.innerHTML 时。我可以看到该元素已实际创建。但它没有显示..

有什么想法吗？ 有没有什么方法可以用来用 javascript 刷新或重绘元素。或任何我可以用来解决这个问题的东西。

谢谢

Answer 1

我为此无休止地挣扎，最后我用填充代替：

<div style="position:relative">
  <vml:rect stroked="f" style="position:absolute"> 
    <vml:fill type="tile" aspect="ignore" src="pathto.png" style="position:absolute">  
    </vml:fill>
  <vml:rect> 
</div>

似乎需要绝对位置，因此需要包含 div 的相对位置。

有关更多信息，请查看 jQuery 的 superpng 插件，该插件使用此技术进行 png alpha 替换。

Answer 2

呃。像往常一样自己修复了它......

function add_tools()
{   
var elemm = document.createElement('rvml:image'); 
elemm.src = 'pic.png';
elemm.className = 'rvml';
document.body.appendChild(elemm);
elemm.id = "gogo";
elemm.style.position='absolute';
elemm.style.width=55;
elemm.style.height=55;
elemm.style.top=200;
elemm.style.left=300;
elemm.style.rotation=200; 
}

setAttribute 函数似乎没有改变元素的状态。
但我仍然遇到事件问题。现在，如果我想使用：

elemm.onload = "alert('coco')";

当我运行绘制元素的 javascript 函数时，应该触发此操作。
但我没有让警报框正常工作。嗯，有点奇怪。我检查了innerHTML，我可以在那里看到它。