2015-11-07 78 views
0

我尝试使用HTML文档到现有的SVG我不得不追加一个SVG的文本,但它好好尝试似乎工作 这里是我的代码使用试图追加SVG的文本,以现有的SVG元素

 var clickedEle=document.getElementById('clicked'); 
     clickedEle.style.fill='orange'; 
     clickedEle.style.backgroundImage = "url('images/mayans.jpg')"; 
     var btnText=document.createElementNS(svgns,'text'); 
     var btnLine= document.createElementNS(svgns,'line'); 

     btnText.setAttribute('x',hexObj.cx); 
     btnText.setAttribute('y',hexObj.cy); //hex is the object referencing the svg 
     btnText.textContent ="Some text"; 

我没有看到任何东西,尽管dom越来越appe.I尝试使用foreingObject添加html元素,也尝试使用css chage背景图像,但我试图添加的svg元素保持不变。

小提琴: https://jsfiddle.net/Snedden27/6b0tx248/

行号346,你必须点击橙色六边形的人看我试图追加到六边形。

+0

我看到你的代码添加了''元到'polygon'元素 可能是http:// stackoverflow.com/questions/22210784/nest-text-inside-svg-path可能会帮助 –

+0

是的确有帮助 – Snedden27

回答

0

正如Sasidhar指出的,您的代码是将文本元素添加到不是文本元素的有效父元素的多边形元素。您需要将文本元素添加到svg元素。在添加文本元素的代码中,变量clickedEle是多边形元素,变量十六进制是svg元素。

更改...

clickedEle.appendChild(btnText); 

到...

hex.appendChild(btnText);