Question

我正在使用SVG动态创建一系列圈子。
该代码创建了一个有效的DOM，您可以在浏览器的开发人员窗口中进行检查。

虽然圆圈不会显示...
仅在开发人员窗口中的DOM的svg代码中更改了某些内容之后，圆圈才会显示。

这是我的代码。我希望这是不言而喻的。
我将原始代码精炼为精髓。

（请没有jQuery解决方案。）

HTML：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>svg</title>
    </head>
    <body>
        <div id="test"></div>
        <script>
TOOLTIPS = [
  { "x": 100, "y": 100 },
  { "x": 200, "y": 200 }
];

(function () {
var obj = document.createElement('object');
obj.type = 'image/svg+xml';
obj.data = 'test.svg';
obj.onload = function () {
    TOOLTIPS.forEach(function (index) {
        var svgDoc = document.getElementsByTagName('object')[0].contentDocument;
        var svgRoot = svgDoc.documentElement;
        var group = svgRoot.getElementById('layer1');
        var use = svgDoc.createElementNS('http://www.w3.org/2000/svg', 'use');

        use.setAttribute('xlink:href', '#blue');
        use.setAttribute('transform', 'translate(' + index.x + ' ' + index.y + ')');

        group.appendChild(use);
    });
};
document.getElementById('test').appendChild(obj);
})();
    </script>
</body>

SVG（'test.svg'）：

<svg id="svgBody" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1366 768">
  <defs>
    <circle id="blue" style="fill: #00f" cx="12.5" cy="12.5" r="8" />
  </defs>
  <g id="layer1"></g>
</svg>

SVG：动态创建的<use>不会显示

0 个答案: