使用DOM将SVG元素添加到现有的SVG

本文介绍了使用DOM将SVG元素添加到现有的SVG的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我有一个类似于以下代码的HTML构造： < div id ='intro'> < svg> //绘制一些svg元素< svg> < / div> 我想能够使用javascript和DOM将上面定义的SVG添加一些元素。我该如何做到这一点？我正在考虑 var svg1 = document.getElementById（'intro'）。getElementsByTagName（'svg'）; svg1 [0] .appendChild（element）; //元素像< line>，< circle> 我不太熟悉使用DOM，或者如何创建要传递给appendChild的元素请帮我解决这个问题，或者告诉我有什么其他办法可以解决这个问题。非常感谢。解决方案如果要创建HTML元素，请使用 document.createElement 函数。 SVG使用命名空间，这就是为什么你必须使用 document.createElementNS 函数。 var svg = document.getElementsByTagName（'svg'）[0]; //获取svg元素 var newElement = document.createElementNS（http://www.w3.org/2000/svg，path）; //在SVG的命名空间中创建一个路径 newElement.setAttribute（d，M 0 0 L 10 10）; //设置路径的数据 newElement.style.stroke =＃000; //设置笔画颜色 newElement.style.strokeWidth =5px; //设置笔画宽度 svg.appendChild（newElement）; 此代码将产生如下内容： < svg> < path d =M 0 0 L 10 10style =stroke：＃000; stroke-width：5px; /> < / svg> createElement ： https://developer.mozilla.org/ en-US / docs / Web / API / Document / createElement createElementNS ： https://developer.mozilla.org/en-US/docs/Web/API / Document / createElementNS I have a HTML construction that resembles the following code:<div id='intro'><svg>//draw some svg elements<svg></div>I want to be able to add some elements to the SVG defined above using javascript and DOM. How would I accomplish that? I was thinking ofvar svg1=document.getElementById('intro').getElementsByTagName('svg');svg1[0].appendChild(element);//element like <line>, <circle>I am not very familiar with using DOM, or how to create the element to be passed to appendChild so please help me out with this or perhaps show me what other alternatives I have to solve this issue. Thanks a lot. 解决方案 If you want to create an HTML element, use document.createElement function. SVG uses namespace, that's why you have to use document.createElementNS function.var svg = document.getElementsByTagName('svg')[0]; //Get svg elementvar newElement = document.createElementNS("http://www.w3.org/2000/svg", 'path'); //Create a path in SVG's namespacenewElement.setAttribute("d","M 0 0 L 10 10"); //Set path's datanewElement.style.stroke = "#000"; //Set stroke colournewElement.style.strokeWidth = "5px"; //Set stroke widthsvg.appendChild(newElement);This code will produce something like this:<svg> <path d="M 0 0 L 10 10" style="stroke: #000; stroke-width: 5px;" /></svg>createElement:https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementcreateElementNS:https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS 这篇关于使用DOM将SVG元素添加到现有的SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！