добавить элементы VML (изображения) с помощью JavaScript - PullRequest
Новая
       37

добавить элементы VML (изображения) с помощью JavaScript

3 голосов
/ 21 июля 2010

Привет, я пытался добавить элементы изображения VML, используя JavaScript. Теперь вот что я использую для генерации этих изображений: 

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. или что-нибудь, что я могу использовать, чтобы исправить это.

спасибо

Ответы [ 2 ]

2 голосов
/ 27 мая 2011

Я бесконечно боролся с этим, и в итоге я использовал вместо этого заполнение: 

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

Для получения дополнительной информации посмотрите плагин superpng для jQuery, который использует эту технику для замены png альфа.

0 голосов
/ 21 июля 2010

э. сам исправил как обычно ... 

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, я могу видеть это прямо там.

...