Question

假设我有一个带有defs标签的SVG标签，用于定义模板。

<svg id="stage" height="2000" width="2800" text-rendering="optimizeLegibility">

    <defs>
        <g id="myTemplate">
          <text class="myText"><tspan></tspan></text>
        </g>
    </defs>      
</svg>

然后在JS中，我能够在我的#stage SVG元素中注入一个标记，如下所示：

           var ns = "http://www.w3.org/2000/svg";
            var lns = 'http://www.w3.org/1999/xlink';
            var elem = document.createElementNS(ns, "use");
            elem.setAttribute("id","XXX");
            elem.setAttributeNS(lns, "xlink:href", "#node-template");
            elem.setAttributeNS(lns, "transform", "translate(700,250)");
            console.log(elem);
            elem.addEventListener("load", function() {
               alert("yay!"); 
            });

            document.querySelector("#stage").appendChild(elem);

加载事件根本不起作用。如果我是console.log elem，我就是这样：

<use xmlns:xlink="http://www.w3.org/1999/xlink" 
xlink:href="#node-template" xlink:transform="translate(700,250)"></use>

模板渲染得很好，但我正在尝试做的是进入我们正在使用的渲染模板。目标是在#myText中设置tspan的内容。

我尝试使用以下代码并设置超时，等待它呈现后，但这给了我相同的结果。

setTimeout( function() {
            var used = document.querySelector("#XXX");
            console.log(used);
             }, 500);

我需要知道一些魔术选择器吗？

如何访问在USE标记中呈现的SVG元素的内容？

0 个答案: