SVG<；文本>+；Javascript：仅第一个<；文本>；页面中的元素加载

为了使我的网站标题具有可伸缩性和以SVG为中心，我使用了以下HTML和Javascript（以及一些自定义CSS）：

HTML:

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

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

---

有没有人经历过类似的事情？我能做些什么来解决这个问题？

你说的“只有第一个”是什么意思。我只看到一个元素。您的实际页面是否有多个具有相同id的元素？如果这样做是无效的，您应该使用类来代替。“viewbox”应该是“viewbox”。感谢Robert和Paul的快速回复。是的，Robert，我基本上为我的页面中的所有H1复制了相同的代码-我意识到ID不应该用于多个元素，所以如果我将其更改为类并更改

page_title=document.querySelector（“page title”）类似于
page\u title=document.querySelector（“.page title”）
应该解决这个问题吗？我还应该提到我已经将上面的JS插入到我主题的“Custom JS”框中，这意味着（我假设）代码是最后一个加载到html表单/页面中的代码。这是我遵循的代码笔，但是，即使在本例中复制h1，您也会看到只有第一个元素生成为SVG：“只有第一个”是什么意思。我只看到一个元素。您的实际页面是否有多个具有相同id的元素？如果这样做是无效的，您应该使用类来代替。“viewbox”应该是“viewbox”。感谢Robert和Paul的快速回复。是的，Robert，我基本上为我的页面中的所有H1复制了相同的代码-我意识到ID不应该用于多个元素，所以如果我将其更改为类并更改
page_title=document.querySelector（“page title”）类似于
page\u title=document.querySelector（“.page title”）
应该解决这个问题吗？我还应该提到我已经将上面的JS插入到我主题的“Custom JS”框中，这意味着（我假设）代码是最后一个加载到html表单/页面中的代码。这是我遵循的代码笔，但是，即使在本例中复制h1，您也会看到只有第一个元素生成为SVG：“只有第一个”是什么意思。我只看到一个元素。您的实际页面是否有多个具有相同id的元素？如果这样做是无效的，您应该使用类来代替。“viewbox”应该是“viewbox”。感谢Robert和Paul的快速回复。是的，Robert，我基本上为我的页面中的所有H1复制了相同的代码-我意识到ID不应该用于多个元素，所以如果我将其更改为类并更改
page_title=document.querySelector（“page title”）类似于
page\u title=document.querySelector（“.page title”）
这能解决问题吗？我还应该提到，我已经将上面的JS插入到我主题的“Custom JS”框中，这意味着（我假设）代码是最后加载到html工作表/页面的代码。这是我遵循的代码笔，但即使在本例中复制h1，您也会看到只有第一个元素生成为SVG：
<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>

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