Question

为了使我的网站标题可扩展＆amp;以SVG为中心，我使用了以下HTML＆amp; Javascript（以及一些自定义CSS）：

HTML：

<h1 id="page-title"><span id="fallback-title">Scalable Title</span>
<svg viewbox="0 0 1200 300" preserveAspectRatio="xMidYMin meet" id="svg-title"></svg>
</h1>

JAVASCRIPT：

(function() {
var fallback_title, page_title, supportsSVG, svgDoc, textNode, title, title_text;

supportsSVG = function() {
return !!document.createElementNS && !!document.createElementNS("http://www.w3.org/2000/svg",
"svg").createSVGRect;
};

if (supportsSVG) {
fallback_title = document.querySelector("#fallback-title");
fallback_title.setAttribute("style", "display:none;");
title_text = fallback_title.childNodes[0].nodeValue;
page_title = document.querySelector("#page-title");
svgDoc = document.querySelector("#svg-title");
title = document.createElementNS('http://www.w3.org/2000/svg', "text");
title.setAttributeNS(null, "x", '50%');
title.setAttributeNS(null, "y", '50%');
title.setAttributeNS(null, "text-anchor", 'middle');
textNode = document.createTextNode(title_text);
svgDoc.appendChild(title);
title.appendChild(textNode);
}

}).call(this);

我可以看到页面中的第一个标题显示为SVG，而以下标题显示为我的后备。我怀疑这与我的JS的'appendChild'部分有关。

有什么奇怪的原因，为什么脚本只会加载到页面的第一个标题而不是后面的标题？例如脚本相对于其他脚本加载的顺序，甚至页面加载的操作。

有没有人经历过类似的事情？我该怎么做才能解决这个问题？

SVG <text> + Javascript：只在页面中加载第一个<text>元素

0 个答案: