在浏览器 DOM-Update 后操作 SVG-Node 不可见

Question

我想不出比这个更好的问题标题了。如果你有，欢迎编辑。

无论如何，我目前正在用 Dart 和 Polymer 编写一个 SVG 操纵器，到目前为止效果还不错。但是，当我尝试将一个 SVG 元素包装在另一个 SVG 元素中时，浏览器将以一种不再可见的方式更新 SVG 元素。

示例：

处理前的 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><!-- some content --></g> <!-- wrap this element in another one -->
    <g><!-- more content --></g>
</svg>

处理后的 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>

操作代码如下所示 (Dart)：

  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);
  }

如评论中所述，当我使用我的 softReload() 方法时，SVG 显示正确。但是，我发现这样做非常难看'soft reload'，因此我不仅想问一个更好的解决方案，而且想问为什么会出现这个问题。

Answer 1

您需要通过 SvgElement.tag 而不是 Element.tag 创建 SVG 元素目前您正在创建标签名称为 g 的 HTML 元素，而不是一个 SVG <g> 元素。

在浏览器 DOM-Update 后操作 SVG-Node 不可见

Manipulated SVG-Node after browser DOM-Update not visible

javascript

svg

dom

dart

polymer