Sencha/Ext - How manipulate SVG Element included inside an svg file ?!_问答_开发者

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

开发者 https://www.devze.com 2023-03-06 03:50 出处：网络

This is my problem.... \'mon\' function works if i set html property dir开发者_运维问答ectly with svg code like this:

This is my problem....

'mon' function works if i set html property dir开发者_运维问答ectly 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 ?

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>