Javascript 浏览器DOM更新后操纵的SVG节点不可见
我想不出比这个更好的题目了。如果你有一个,请随意编辑它 无论如何,我目前正在用Dart和Polymer编写一个SVG操纵器,到目前为止效果相当不错。但是,当我尝试将一个SVG元素包装到另一个元素中时,浏览器将以这样的方式更新SVG元素,使其不再可见 例如: 在操作之前使用SVG。所有元素均可见并正确显示Javascript 浏览器DOM更新后操纵的SVG节点不可见,javascript,dom,svg,dart,polymer,Javascript,Dom,Svg,Dart,Polymer,我想不出比这个更好的题目了。如果你有一个,请随意编辑它 无论如何,我目前正在用Dart和Polymer编写一个SVG操纵器,到目前为止效果相当不错。但是,当我尝试将一个SVG元素包装到另一个元素中时,浏览器将以这样的方式更新SVG元素,使其不再可见 例如: 在操作之前使用SVG。所有元素均可见并正确显示 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlin
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="446px"
height="788.605px" viewBox="0 0 446 788.605" enable-background="new 0 0 446 788.605" xml:space="preserve">
<g><!-- some content --></g> <!-- wrap this element in another one -->
<g><!-- more content --></g>
</svg>
如注释中所述,当我使用softReload()方法时,SVG会正确显示。然而,我发现这样的“软重新加载”非常难看,因此我不仅想寻求更好的解决方案,还想问为什么会出现这个问题。您需要通过而不是Element.tag创建SVG元素,此时您正在创建一个标记名为
g
的HTML元素,而不是SVG
元素。有效!非常感谢你,你让我今天真的很开心!!
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="446px"
height="788.605px" viewBox="0 0 446 788.605" enable-background="new 0 0 446 788.605" xml:space="preserve">
<g><!-- wrapper -->
<g><!-- content not visible anymore --></g>
</g>
<g><!-- content still visible --></g>
</svg>
Element _createWrapper(Element element) {
Element wrapper = new Element.tag('g');
var parent = element.parent;
int idx = parent.children.indexOf(element);
wrapper.append(element);
// insert wrapper at the original element's position
// in its parent
parent.children.insert(idx + 1, wrapper);
wrapper.append(element);
// if I use softReload() everything is visible again
//svg.softReload();
return wrapper;
}
void softReload() {
if (_svg != null) _svg.remove();
_svg = new SvgElement.svg(_svg.outerHtml);
$['container'].append(_svg);
}