我使用 javascript 指令从头开始构建一个 svg 文档。我首先创建带有 ID 的 defs
<defs><g id="id45"> ... </g></defs>
并正确调用它们。
<use xlink:href="#id45" x="0" y="0">
唉，它不显示任何“使用过的”元素。
但是，当我将 javascript 生成(Firefox 40.0.3)的结果复制粘贴到一个全新的 .html 文件中时，一切都很好。正如你可能看到的 here(参见丑陋的、粉色和蓝色的盒子):
<html lang="jap">
<head>
<meta charset="utf-8">
<title>plot</title>
<link rel="stylesheet" type="text/css" href="screen.css">
</head>
<body>
<svg viewBox="-10 -10 456 129" width="456px" height="129px" id="kanji_grid">
<defs><g id="kanji_grid_box"><rect height="129" width="129" y="0" x="0"></rect><line y2="129" x2="64.5" y1="0" x1="64.5"></line><line y2="64.5" x2="129" y1="64.5" x1="0"></line></g></defs>
<rect class="frame" height="129" width="456" y="-10" x="-10"></rect><g transform="translate(0, 0)"><use style="fill:blue" xlink:href="#kanji_grid_box" y="10" x="10"></use><path class="main_stroke" d="M53.21,18.37C53.75,20.5,53.47,21.78,52.96,23.62C50.38,33,42.62,52.75,35.75,64C34.36,66.27,34.75,67.5,36.75,67.5C48.38,67.5,65.21,74.98,75.58,83.91C78.14,86.12,80.26,88.42,81.75,90.75"></path><circle class="start_circle" r="6" cy="18.37" cx="53.21"></circle></g><g transform="translate(109, 0)"><use style="fill:blue" xlink:href="#kanji_grid_box" y="10" x="10"></use><path d="M53.21,18.37C53.75,20.5,53.47,21.78,52.96,23.62C50.38,33,42.62,52.75,35.75,64C34.36,66.27,34.75,67.5,36.75,67.5C48.38,67.5,65.21,74.98,75.58,83.91C78.14,86.12,80.26,88.42,81.75,90.75"></path><path class="main_stroke" d="M69.62,42.18C70.12,43.88,70.25,45.75,69.61,48.11C65.93,61.8,54.61,81.6,27,91.75"></path><circle class="start_circle" r="6" cy="42.18" cx="69.62"></circle></g><g transform="translate(218, 0)"><use style="fill:blue" xlink:href="#kanji_grid_box" y="10" x="10"></use><path d="M53.21,18.37C53.75,20.5,53.47,21.78,52.96,23.62C50.38,33,42.62,52.75,35.75,64C34.36,66.27,34.75,67.5,36.75,67.5C48.38,67.5,65.21,74.98,75.58,83.91C78.14,86.12,80.26,88.42,81.75,90.75"></path><path d="M69.62,42.18C70.12,43.88,70.25,45.75,69.61,48.11C65.93,61.8,54.61,81.6,27,91.75"></path><path class="main_stroke" d="M13.88,50.43C17.36,51.82,21.14,51.28,24.76,50.96C44.28,49.26,66.8,46.88,85.37,46.33C89.03,46.22,92.58,46.23,95.99,47.75"></path><circle class="start_circle" r="6" cy="50.43" cx="13.88"></circle></g><g class="final" transform="translate(327, 0)"><path d="M53.21,18.37C53.75,20.5,53.47,21.78,52.96,23.62C50.38,33,42.62,52.75,35.75,64C34.36,66.27,34.75,67.5,36.75,67.5C48.38,67.5,65.21,74.98,75.58,83.91C78.14,86.12,80.26,88.42,81.75,90.75"></path><path d="M69.62,42.18C70.12,43.88,70.25,45.75,69.61,48.11C65.93,61.8,54.61,81.6,27,91.75"></path><path d="M13.88,50.43C17.36,51.82,21.14,51.28,24.76,50.96C44.28,49.26,66.8,46.88,85.37,46.33C89.03,46.22,92.58,46.23,95.99,47.75"></path></g>
</svg>
</body></html>
难道动态生成的 <defs> 还没有被及时知道吗？我该如何避免这种情况？
这是我用来构建整个 svg 文档的函数
Node.prototype.svg_grow = function(node_name, node_attr) {
/*
node_name is a string
node_attr is a map of string to string
*/
var n = document.createElementNS("http://www.w3.org/2000/svg", node_name);
this.appendChild(n);
if (typeof node_attr !== 'undefined') {
for (let key in node_attr) {
n.setAttribute(key, node_attr[key]);
}
}
return n;
}
然后我使用这种结构:
<!DOCTYPE html><html><head></head><body>
<svg id="kanji_grid">
</svg>
<script>
var s_svg = document.getElementById("kanji_grid");
var s_defs = s_svg.svg_grow('defs');
var s_g = s_defs.svg_grow('g', {'id':"kanji_box"});
s_g.svg_grow('rect', {'x':0, 'y':0, 'width':s+2*b, 'height':s+2*b});
etc...
</script>
</body></html>
最佳答案
您正在尝试在 <use> 上创建 xlink:href 属性使用 setAttribute 的元素不是您。
这行不通，因为您需要使用 setAttributeNS 在 xlink 命名空间中创建它。例如
node.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "#id45");
关于javascript - defs 并在动态创建的页面中使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32359466/