Sencha / Ext - 如何操作SVG元素包含在一个svg文件内？ [英] Sencha/Ext - How manipulate SVG Element included inside an svg file ?!
问题描述
这是我的问题....
This is my problem....
'mon'功能可以直接使用svg代码设置html属性：
'mon' function works if i set html property directly with svg code like this:
html: '<svg><text id="ID">Example</text></svg>
我可以通过ID管理元素并设置事件。
I can manage elements by ID and set an event.
但是，如果我通过标记EMBED或iFRAME召回svg文件，如下所示：
But, if i recall an svg file by tag EMBED or iFRAME like this:
html: '<embed src="abc.svg">'
包含在svg文件中的元素被隐藏！
the elements included in svg file are hidden!!
如果我写的例如
alert(Ext.get("ID"))
与'ID'是指包含在'abc.svg'中的Html元素文件，chrome调试器说：
with 'ID' refers to an Html Element included in 'abc.svg' file, chrome debugger says:
未捕获TypeError：无法读取属性'id'为null（从sencha-debug.js）
资源解释为文档，但是使用MIME类型image / svg + xml进行传输。
我可以读取包含在svg文件中的元素吗？如果是这样，那么如何？
Can i read elements included in a svg file ?! If so, how ?
推荐答案
确定你可以，这个示例中的控制台将显示cirkel，嵌入的类型必须设置，内容必须是有效的SVG，并且此示例需要延迟，因为SVG的加载需要一些时间。
希望这有助于
Grtz
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>
这里test.svg文件的内容
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>
这篇关于Sencha / Ext - 如何操作SVG元素包含在一个svg文件内？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
