Sencha/Ext - How manipulate SVG Element included inside an svg file ?!

问题

This is my problem....

'mon' function works if i set html property directly with svg code like this:

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

I can manage elements by ID and set an event.

But, if i recall an svg file by tag EMBED or iFRAME like this:

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

the elements included in svg file are hidden!!

If i write for example

alert(Ext.get("ID"))

with 'ID' refers to an Html Element included in 'abc.svg' file, chrome debugger says:

Uncaught TypeError: Cannot read property 'id' of null (from sencha-debug.js) Resource interpreted as Document but transferred with MIME type image/svg+xml.

Can i read elements included in a svg file ?! If so, how ?

回答1:

sure you can, the console in this sample will show "cirkel", the type of the embed has to be set, the contents has to be valid SVG and this sample needs the defer because the loading of the SVG takes some time. Hope this helps 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>

Here The contents of the test.svg file

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

来源：https://stackoverflow.com/questions/6025161/sencha-ext-how-manipulate-svg-element-included-inside-an-svg-file

标签

javascript

sencha-touch

extjs