JavaScript CreateElements和SVG

我想使用Javascript创建内联SVG图形

然而，似乎

createElements

函数应用了一些规范化，并将所有标记转换为小写。这对于HTML很好，但对于XML/SVG则不行。我使用的NS是

尤其是我在创建元素时遇到问题。因为它将被附加为

，因此不起作用

我做了一些搜索，但还没有找到解决方案

有人知道解决办法吗

document.createElementNS("http://www.w3.org/2000/svg","textPath");

导致

<textpath></textpath>

---

我希望以下示例将对您有所帮助：

函数CreateSVG（）{
var xmlns=”http://www.w3.org/2000/svg";
var-boxWidth=300；
var-boxHeight=300；
var svgElem=document.createElements（xmlns，“svg”）；
svgElem.setAttributeNS（null，“viewBox”，“0 0”+boxWidth+“”+boxHeight）；
setAttributeNS（null，“宽度”，boxWidth）；
svgElem.setAttributeNS（null，“高度”，boxHeight）；
svgElem.style.display=“块”；
var g=document.createElements（xmlns，“g”）；
附肢儿童（g）；
g、 setAttributeNS（null，'transform'，'matrix（1,0,0，-1,0300'）；
//绘制线性梯度
var defs=document.createElements（xmlns，“defs”）；
var grad=document.createElements（xmlns，“linearGradient”）；
梯度设置属性（null，“id”，“梯度”）；
梯度设置属性（空，“x1”，“0%”；
梯度设置属性（空，“x2”，“0%”；
梯度设置属性（空，“y1”，“100%”；
梯度设置属性（空，“y2”，“0%”；
var stopTop=document.createElements（xmlns，“stop”）；
setAttributeNS（null，“偏移量”，“0%”）；
setAttributeNS（null，“停止颜色”，“#ff0000”）；
渐变附加子对象（stopTop）；
var stopbooth=document.createElements（xmlns，“stop”）；
setAttributeNS（null，“偏移量”，“100%”）；
setAttributeNS（null，“停止颜色”，“#0000ff”）；
渐变子对象（停止底部）；
残疾儿童（年级）；
g、 儿童（defs）；
//划界
var coords=“M 0，0”；
coords+=“L0300”；
coords+=“L300，0”；
坐标+=“l0，-300”；
coords+=“l-300，0”；
var path=document.createElements（xmlns，“路径”）；
setAttributeNS（null，'stroke'，“#000000”）；
setAttributeNS（空，'笔划宽度'，10）；
setAttributeNS（null，'stroke linejoin'，'round'）；
setAttributeNS（null，'d'，coords）；
setAttributeNS（null，'fill'，“url（#gradient）”；
setAttributeNS（null，'opacity'，1.0）；
g、 附加子对象（路径）；
var svgContainer=document.getElementById（“svgContainer”）；
svgContainer.appendChild（svgElem）；
}

#svgContainer{
宽度：400px；
高度：400px；
背景色：#A0；
}

---

给出的答案太笼统，对我来说没有什么用处，我觉得这太麻烦了，或者说是假的。如果我是你，我会在html中使用简单的on元素，标记为：

<b id="myElement"></b>

---

我希望这会有所帮助。

首先，使用CreateElements，就像您正在做的那样。createElement（不带NS）会自动将HTML文档中的元素名称降为小写

其次，不要相信谷歌浏览器的“检查元素”功能。它似乎以小写形式显示每个元素，而不管实际的节点名是什么。试试这个：

document.createElementNS("http://www.w3.org/2000/svg", "textPath").nodeName
// Output: "textPath"

document.createElement("textPath").nodeName
// Output: "TEXTPATH"

你的问题可能是一个无关的问题。例如，该代码在Firefox中运行良好，但在Chrome（12.0.742.112）中出现中断：

函数animateSVG（）{
var svgNS=”http://www.w3.org/2000/svg";
var textElement=document.getElementById（“textElement”）；
var amElement=document.createElements（svgNS，“animateMotion”）；
log（textElement）；
console.log（amElement）；
console.log（amElement.nodeName）；
setAttribute（“路径”，“m0 0 l100”）；
amElement.setAttribute（“dur”、“5s”）；
setAttribute（“填充”、“冻结”）；
textElement.appendChild（amElement）；
//amElement.beginElement（）；
};

是SVG！
我刚刚解决了一个类似的问题。
document.createElement（我假设document.createElements）在从HTML页面调用时会创建一个HTML节点（大小写不重要），而不是xml节点

以下是Chrome中的作品：

doc=document.implementation.createDocument（null，null，null）；
doc.createElements（“http://www.w3.org/2000/svg“，”文本路径“）

您将获得混合案例节点。
如何发现这种情况？如何将创建的元素转储到XML代码中？XML标记名应该是敏感的：谢谢您的回复。基于您的答案和文本到路径svg示例：我创建了以下文档：尽管生成的源代码看起来相同，并且元素的创建遵循您的示例，但我的文档不起作用。。。我遗漏了什么吗？您的示例帮助我开始从JS创建SVG元素。仍然需要阅读关于核心DOM的W3.org规范文档。名称空间相当混乱。谢谢你的提示。这对人有用吗？我只得到一个没有任何SVG元素的灰色框。（Firefox和Chrome一样）这个问题是关于SVG的，而不是HTML。@gilly3他有一个观点——公认的答案是基本上从头开始构建一个SVG DOM元素，这虽然很清楚知道如何做，而且从技术上说是更正确的答案，但并不完全实用。因为SVG文件中的SVG语法与DOM中的SVG定义语法基本相同（这是一个非常具体的用例，将整个SVG图形标记为字符串，并将其按原样添加到HTML元素中。问题是专门询问如何将SVG元素添加到现有图形中。现在，您可以在某些浏览器中编写SVG元素的
innerHTML
，但这是添加元素的唯一方法t到当前IE中的现有图形，以及在提出此问题时的所有浏览器中，都是通过
createElements（）
。您对chromes i的评论
document.createElementNS("http://www.w3.org/2000/svg", "textPath").nodeName
// Output: "textPath"

document.createElement("textPath").nodeName
// Output: "TEXTPATH"