Sencha / Ext - Как манипулировать SVG-элементом, включенным в SVG-файл ?! - PullRequest
Новая
       0

Sencha / Ext - Как манипулировать SVG-элементом, включенным в SVG-файл ?!

0 голосов
/ 17 мая 2011

Это моя проблема ....

Функция 'mon' работает, если я устанавливаю свойство html напрямую с помощью кода svg следующим образом: 

html: '<svg><text id="ID">Example</text></svg>

Я могу управлять элементами по ID иустановить событие.

Но, если я вспомню svg-файл по тегу EMBED или iFRAME, вот так: 

html: '<embed src="abc.svg">'

элементы, включенные в svg-файл, будут скрыты !!

Если я напишу, например, 

alert(Ext.get("ID"))

, где 'ID' относится к элементу HTML, включенному в файл 'abc.svg', отладчик chrome сообщает:

Uncaught TypeError: Cannotчитать свойство 'id' из null (из sencha-debug.js) Ресурс интерпретируется как Document, но передается с MIME-типом image / svg + xml.

Могу ли я прочитать элементы, включенные в файл svg ?!Если да, то как?

1 Ответ

0 голосов
/ 25 ноября 2011

Вы можете, консоль в этом примере будет показывать "cirkel", должен быть установлен тип встраивания, содержимое должно быть допустимым SVG, и этот образец нуждается в отсрочке, потому что загрузка SVG занимает некоторое время , Надеюсь это поможет Grtz 

<head>
  <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-gray.css" />
  <script type="text/javascript" src="ext/bootstrap.js"></script>
  <script type="text/javascript">
  Ext.onReady(function(){
    var win = new Ext.Window({  
      width  : 300,  
      height : 150,  
      layout : 'fit',
      html: '<embed src="test.svg" type="image/svg+xml" />'
    });
    win.show();
    var delayedTask = new Ext.util.DelayedTask().delay(400, function(){
      console.log(window.document.plugins[0].getSVGDocument().firstChild.childNodes[1].id)
    }, win);

  });
  </script>
</head>
<body>
</body>
</html>

Здесь Содержимое файла test.svg 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle id="cirkel" cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>
...