Sencha/Ext - 如何操作包含在 svg 文件中的 SVG 元素？！答案

【问题标题】：Sencha/Ext - How manipulate SVG Element included inside an svg file ?!Sencha/Ext - 如何操作包含在 svg 文件中的 SVG 元素？！
【发布时间】：2018-02-09 02:32:17
【问题描述】：

这是我的问题....

如果我直接使用 svg 代码设置 html 属性，则“mon”函数可以工作，如下所示：

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

我可以通过 ID 管理元素并设置事件。

但是，如果我通过标签 EMBED 或 iFRAME 回忆一个 svg 文件，如下所示：

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

svg 文件中包含的元素被隐藏了！！

如果我写例如

alert(Ext.get("ID"))

带有“ID”的指的是包含在“abc.svg”文件中的 Html 元素，chrome 调试器说：

未捕获的类型错误：无法读取 null 的属性“id”（来自 sencha-debug.js）资源被解释为 Document 但以 MIME 类型 image/svg+xml 传输。

我可以读取包含在 svg 文件中的元素吗？！如果有，怎么做？

【问题讨论】：

您是否尝试过通过 iframe 包含 SVG？（我不知道 Sencha 或 extjs，但这应该可以与 HTML 以及任何使用它的库一起使用。）
是的，我有。但它不起作用。我还尝试创建一个孩子并将其附加到 HTML 正文中。没有什么。 SVG DOM 是隐藏的。如果你愿意，你可以试试。也许你可以做更多的事情。我在拍脑袋……
您是否遇到同样的错误？哪个错误？更改 SVG 以添加命名空间（因为如果保存为 SVG，SVG 需要命名空间），此代码适用于 FF:<script> function run (e) { alert(e.target.contentDocument.getElementById('ID')); } </script> <iframe onload="run(event);" src="svg-test.svg" />
或者，您可以简单地避免使用“svg”扩展名进行保存，从而避免需要“svg”扩展名所需的命名空间（和格式良好的 XML）。
是的，我做到了。完全一样的错误。我认为问题在于煎茶。如果我在没有 sencha 的情况下操作 svg 文件，但只使用纯 javascript，它就可以工作。我不明白为什么....

标签： javascript sencha-touch extjs

【解决方案1】：

当然可以，此示例中的控制台将显示“cirkel”，必须设置嵌入的类型，内容必须是有效的 SVG，并且此示例需要延迟，因为 SVG 的加载需要一些时间. 希望这可以帮助格子

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

【讨论】：

我可以从使用 extjs 创建的图表（例如饼图）中获取 svg 吗？
问题是煎茶。这是一个缺失的功能，现在可能已经解决了