Home/ Questions/Q 6853389
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T01:30:24+00:00

This is my problem…. ‘mon’ function works if i set html property directly with

  • 0

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 ?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

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