使用JavaScript生成SVG元素
P粉662802882
P粉662802882 2023-08-22 22:04:39
0
2
505
<p>如何使用JavaScript创建一个SVG元素?我尝试了以下代码:</p> <pre class="brush:php;toolbar:false;">var svg = document.createElement('SVG'); svg.setAttribute('style', 'border: 1px solid black'); svg.setAttribute('width', '600'); svg.setAttribute('height', '250'); svg.setAttribute('version', '1.1'); svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg'); document.body.appendChild(svg);</pre> <p>然而,它创建的SVG元素的宽度和高度都为零。</p>
P粉662802882
P粉662802882

全部回复(2)
P粉670107661

.createElementNSsvgpath 元素所必需的方法。以下是示例。

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
var path1 = document.createElementNS("http://www.w3.org/2000/svg", 'path');
var path2 = document.createElementNS("http://www.w3.org/2000/svg", 'path');

svg.setAttribute("aria-hidden","true");
svg.setAttribute('viewbox', '0 0 24 24');
svg.setAttribute('width', '24px');
svg.setAttribute('height', '24px');

path1.setAttribute('d', 'M0 0h24v24H0z');
path1.setAttribute('fill', 'none');

path2.setAttribute('d', 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z');
path2.setAttribute('fill', '#2962ff');

svg.appendChild(path1);
svg.appendChild(path2);
document.body.appendChild(svg);
P粉294954447

您忘记了您的svg元素的命名空间URIxmlns属性。

此外,version属性被所有浏览器忽略。

var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
    svg.setAttribute('style', 'border: 1px solid black');
    svg.setAttribute('width', '600');
    svg.setAttribute('height', '250');
    svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
    document.body.appendChild(svg);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!