JavaScript createElementNS 和 SVG [英] JavaScript createElementNS and SVG

问题描述

我想使用 Javascript 创建内联 SVG 图形.

然而，似乎 createElementNS 函数应用了一些规范化并将所有标签转换为小写.这适用于 HTML，但不适用于 XML/SVG.我使用的 NS 是 http://www.w3.org/2000/svg.>

特别是我在创建元素时遇到了问题.因为它将被附加为 ，因此将不起作用.

我进行了一些搜索，但还没有找到解决方案.

有人知道解决办法吗?

document.createElementNS(http://www.w3.org/2000/svg",textPath");

结果

解决方案

希望下面的例子能帮到你:

function CreateSVG() {var xmlns = "http://www.w3.org/2000/svg";var boxWidth = 300;var boxHeight = 300;var svgElem = document.createElementNS(xmlns, "svg");svgElem.setAttributeNS(null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);svgElem.setAttributeNS(null, "width", boxWidth);svgElem.setAttributeNS(null, "height", boxHeight);svgElem.style.display = "block";var g = document.createElementNS(xmlns, "g");svgElem.appendChild(g);g.setAttributeNS(null, 'transform', 'matrix(1,0,0,-1,0,300)');//绘制线性渐变var defs = document.createElementNS(xmlns, "defs");var grad = document.createElementNS(xmlns, "linearGradient");grad.setAttributeNS(null, "id", "gradient");grad.setAttributeNS(null, "x1", "0%");grad.setAttributeNS(null, "x2", "0%");grad.setAttributeNS(null, "y1", "100%");grad.setAttributeNS(null, "y2", "0%");var stopTop = document.createElementNS(xmlns, "stop");stopTop.setAttributeNS(null, "offset", "0%");stopTop.setAttributeNS(null, "stop-color", "#ff0000");grad.appendChild(stopTop);var stopBottom = document.createElementNS(xmlns, "stop");stopBottom.setAttributeNS(null, "offset", "100%");stopBottom.setAttributeNS(null, "stop-color", "#0000ff");grad.appendChild(stopBottom);defs.appendChild(grad);g.appendChild(defs);//绘制边框var coords = "M 0, 0";坐标 += " l 0, 300";坐标 += " l 300, 0";坐标 += " l 0, -300";坐标 += " l -300, 0";var path = document.createElementNS(xmlns, "path");path.setAttributeNS(null, 'stroke', "#000000");path.setAttributeNS(null, 'stroke-width', 10);path.setAttributeNS(null, 'stroke-linejoin', "round");path.setAttributeNS(null, 'd', coords);path.setAttributeNS(null, 'fill', "url(#gradient)");path.setAttributeNS(null, '不透明度', 1.0);g.appendChild(path);var svgContainer = document.getElementById("svgContainer");svgContainer.appendChild(svgElem);}

#svgContainer {宽度:400px；高度:400px；背景颜色:#a0a0a0；}

<div id="svgContainer"></div>

I want to create inline SVG graphics using Javascript.

However, it seems like createElementNS function applies some normalization and transforms all tags to lowercase. That is fine for HTML but not for XML/SVG. The NS I used is http://www.w3.org/2000/svg.

In particular I have problems creating a element. As it will be appended as <textpath> and thus will not work.

I did some search but could not find a solution yet.

Does anybody know a solution?

document.createElementNS("http://www.w3.org/2000/svg","textPath");

results in

<textpath></textpath>

解决方案

I hope, the following example will help you:

function CreateSVG() {
    var xmlns = "http://www.w3.org/2000/svg";
    var boxWidth = 300;
    var boxHeight = 300;

    var svgElem = document.createElementNS(xmlns, "svg");
    svgElem.setAttributeNS(null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
    svgElem.setAttributeNS(null, "width", boxWidth);
    svgElem.setAttributeNS(null, "height", boxHeight);
    svgElem.style.display = "block";

    var g = document.createElementNS(xmlns, "g");
    svgElem.appendChild(g);
    g.setAttributeNS(null, 'transform', 'matrix(1,0,0,-1,0,300)');

    // draw linear gradient
    var defs = document.createElementNS(xmlns, "defs");
    var grad = document.createElementNS(xmlns, "linearGradient");
    grad.setAttributeNS(null, "id", "gradient");
    grad.setAttributeNS(null, "x1", "0%");
    grad.setAttributeNS(null, "x2", "0%");
    grad.setAttributeNS(null, "y1", "100%");
    grad.setAttributeNS(null, "y2", "0%");
    var stopTop = document.createElementNS(xmlns, "stop");
    stopTop.setAttributeNS(null, "offset", "0%");
    stopTop.setAttributeNS(null, "stop-color", "#ff0000");
    grad.appendChild(stopTop);
    var stopBottom = document.createElementNS(xmlns, "stop");
    stopBottom.setAttributeNS(null, "offset", "100%");
    stopBottom.setAttributeNS(null, "stop-color", "#0000ff");
    grad.appendChild(stopBottom);
    defs.appendChild(grad);
    g.appendChild(defs);

    // draw borders
    var coords = "M 0, 0";
    coords += " l 0, 300";
    coords += " l 300, 0";
    coords += " l 0, -300";
    coords += " l -300, 0";

    var path = document.createElementNS(xmlns, "path");
    path.setAttributeNS(null, 'stroke', "#000000");
    path.setAttributeNS(null, 'stroke-width', 10);
    path.setAttributeNS(null, 'stroke-linejoin', "round");
    path.setAttributeNS(null, 'd', coords);
    path.setAttributeNS(null, 'fill', "url(#gradient)");
    path.setAttributeNS(null, 'opacity', 1.0);
    g.appendChild(path);

    var svgContainer = document.getElementById("svgContainer");
    svgContainer.appendChild(svgElem);
}

#svgContainer {
  width: 400px;
  height: 400px;
  background-color: #a0a0a0;
}

<body onload="CreateSVG()">
    <div id="svgContainer"></div>
</body>

这篇关于JavaScript createElementNS 和 SVG的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！