如何使用JavaScript创建有效的svg元素 [英] How to create a valid svg element with javascript

问题描述

我正在使用SVG，并创建了一个svg元素.我使用html将< rect> 元素直接添加到svg中，然后使用javascript创建了一个新元素(无命名空间)< circle> 并将其附加到svg元素.svg视图框中显示的< rect> 元素，但未显示< circle> 元素.

I was working with SVG and i created an svg element. I added a <rect> element directly into the svg with html and then I created a new element (without namespace) <circle> with javascript and appended it to the svg element. The <rect> element displayed in the svg viewbox but the <circle> element did not display.

我在控制台上得到了< rect> 和< circle> 并检查了构造函数.< rect> 元素返回 SVGRectElement ，但是< circle> 返回 HTMLUnknownElement .我创建了一个新的< circle> 元素(其名称空间为: https://www.w3.org/2000/svg )，并检查了返回 Element 的构造函数.

I got the <rect> and <circle> on the console and checked the constructor. The <rect> element returned SVGRectElement but the <circle> returned HTMLUnknownElement. I created a new <circle> element (with namespace: https://www.w3.org/2000/svg) and checked the constructor which returned Element.

无论哪种方式，将带名称空间和未带名称空间的< circle> 元素都附加到svg都不会出现在svg视图框中.那么，如何使用javascript创建可识别的svg元素，该元素将返回 SVGCircleElement?.

Whichever way, appending both the namespaced and non-namespaced <circle> element to the svg did not appear in the svg viewbox. So how do i create a recognized svg element with javascript that will return SVGCircleElement?.

   var circle = document.createElement('circle');
    circle.setAttribute('cx', '10');
    circle.setAttribute('cy', '10');  
    circle.setAttribute('r', '30');
    circle.setAttribute('fill', 'red');

    var circle_2 = document.createElementNS('https://www.w3.org/2000/svg','circle');
    circle.setAttribute('cx', '5');
    circle.setAttribute('cy', '20');  
    circle.setAttribute('r', '30');
    circle.setAttribute('fill', 'blue');

    var svg = document.getElementById('svgx');
    var rect = document.getElementById('svgrect');
    svg.appendChild(circle);
    svg.appendChild(circle_2);

    console.log(svg.constructor); // SVGSVGElement() { [native code] }
    console.log(rect.constructor); // HTMLRectElement() { [native code] }
    console.log(circle.constructor); // HTMLUnknownElement() { [native code] }
    console.log(circle_2.constructor); // Element() { [native code] }

<svg style='width: 100%;' id='svgx'>
<rect x='5' y='5' width='50' height='30' fill='black' id='svgrect'>
</svg>

推荐答案

从"https"中删除"s".

Remove the "s" from "https".

var circle_2 = document.createElementNS('http://www.w3.org/2000/svg','circle');

即使它看起来像一个URL.实际上，它只是一个字符串常量，指示此XML文件是SVG文件.名称空间常量必须与此处显示的完全相同.

Even though it looks like a URL. It is really just a string constant that indicates this XML file is an SVG file. The namespace constant has to be exactly as presented here.

对于该部分代码，您还需要将 circle 更改为 circle_2 .

Also you need to change circle to circle_2 for that section of code.

var circle_2 = document.createElementNS('http://www.w3.org/2000/svg','circle');
circle_2.setAttribute('cx', '5');
circle_2.setAttribute('cy', '20');  
circle_2.setAttribute('r', '30');
circle_2.setAttribute('fill', 'blue');

var svg = document.getElementById('svgx');
var rect = document.getElementById('svgrect');
svg.appendChild(circle_2);

<svg style='width: 100%;' id='svgx'>
<rect x='5' y='5' width='50' height='30' fill='black' id='svgrect'>
</svg>

这篇关于如何使用JavaScript创建有效的svg元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！