通过javascript动态设置文本SVG元素
Setting text SVG element dynamically via javascript
我通过JavaScript创建SVG元素,它运行良好,但当我创建一个文本SVG元素并定义其内容时,浏览器不会呈现该值,尽管当我用firebug检查它时,该值在代码中。
代码为:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xlink','http://www.w3.org/1999/xlink');
svg.setAttribute('width','187');
svg.setAttribute('height','234');
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
rect.setAttribute('width','187');
rect.setAttribute('height','234');
rect.setAttribute('fill','#fff');
rect.setAttribute('stroke','#000');
rect.setAttribute('stroke-width','2');
rect.setAttribute('rx','7');
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');
text.setAttribute('x', '10');
text.setAttribute('y', '20');
text.setAttribute('fill', '#000');
text.textContent = '2';
svg.appendChild(rect);
svg.appendChild(text);
var wp = document.getElementById('wrapper');
wp.appendChild(svg);
这是jsfiddle链接。如果你检查SVG,你会在那里看到文本元素的值,但浏览器不会呈现它
感谢
您的命名空间中缺少一个"h"
是
var text = document.createElementNS('ttp://www.w3.org/2000/svg', 'text');
应该是
var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
function createText() {
var newText = document.createElementNS(svgNS,"text");
newText.setAttributeNS(null,"x",20);
newText.setAttributeNS(null,"y",100);
var textNode = document.createTextNode("milind morey");
newText.appendChild(textNode);
document.getElementById("firstGroup").appendChild(newText);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
<g id="firstGroup">
<text x="20" y="45" onclick="createText();" font-size=+13px">Click on this text to create a new text.</text>
</g>
</svg>
我压缩了你的代码一点,现在它可以了
let txt='2';
wrapper.innerHTML=`
<svg xlink="http://www.w3.org/1999/xlink" width="187" height="234">
<rect width="187" height="234" fill="#fff" stroke="#000"
stroke-width="2" rx="7"></rect>
<text x="10" y="20" fill="#000">${txt}</text>
</svg>
`;
<div id=wrapper></div>
您犯了一个非常简单的错误:
var text=document.createElementNS('ttp://www.w3.org/2000/svg','text');^^^与相比
var text=document.createElementNS('http://www.w3.org/2000/svg','text');^^^^敲击键盘!
相关文章:
- 如何自动保存动态生成的HTML SVG元素
- 将包含SVG元素的HTML转换为图像文件
- SVG元素——处理和选择文本
- SVG元素在转换后会丢失事件侦听器
- 获取以屏幕像素为单位的旋转SVG元素的边界
- 使用JavaScript查找具有特定属性的SVG元素
- 如何使用正则表达式按类获取svg元素
- 将SVG元素拖动到另一个SVG元素上
- 我想隐藏/显示我的SVG元素,同时在anguarJS中使用它
- 如何在svg元素上添加和删除css类
- 在模式框打开之前更改 SVG 元素的颜色,并在框打开时保持该颜色
- 将复杂的 SVG 元素追加到选区
- 使用 JQuery 对 Spin SVG 元素进行动画处理
- 检查直线是否与带有 SVG 元素的圆相交
- 如何添加效果,以便将鼠标悬停在 SVG 元素上使其变大
- 如何将运动模糊尾巴添加到圆圈中的 svg 元素
- SVG 元素作为容器
- 从上传的文件中获取svg元素的宽度
- 是否可以用D3将svg元素添加到开放层映射中
- 单击时将SVG元素替换为另一个