JavaScript createElementNS和SVG [英] JavaScript createElementNS and SVG

问题描述

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

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

尤其是在创建元素时遇到问题.由于它将作为< textpath> 附加，因此将不起作用.

我进行了一些搜索，但仍未找到解决方案.

有人知道解决方案吗?

  document.createElementNS("http://www.w3.org/2000/svg"，"textPath")； 

产生

 < textpath></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，'opacity'，1.0);g.appendChild(path);var svgContainer = document.getElementById("svgContainer");svgContainer.appendChild(svgElem);}  

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

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

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屋！