web-dev-qa-db-ja.com

JavaScript createElementおよびSVG

Javascriptを使用してインラインSVGグラフィックスを作成したい。

ただし、createElementNS関数は正規化を適用し、すべてのタグを小文字に変換するようです。これはHTMLには適していますが、XML/SVGには適していません。 NS私が使用したのは http://www.w3.org/2000/svg です。

特に、要素の作成に問題があります。として追加されるので、動作しません。

検索しましたが、解決策が見つかりませんでした。

誰もが解決策を知っていますか？

どうもありがとう！

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

結果として

<textpath></textpath>
javascriptsvgcapitalization
28
pat

次の例が役立つことを願っています。

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>
43
gumape

最初に、作成中にcreateElementNSを使用します。 createElement（NSなし）は、 Mozillaドキュメント に従って、HTMLドキュメント内の要素名を自動的に小文字にします。

第二に、ここでGoogle Chromeの「要素を検査」機能を信頼しないでください。実際のnodeNameに関係なく、すべての要素が小文字で表示されるようです。これを試して：

> document.createElementNS（ "http://www.w3.org/2000/svg"、 "textPath"）。nodeName 
 "textPath" 
> document.createElement（ 「textPath」）。nodeName 
「TEXTPATH」

あなたの問題は無関係な問題かもしれません。たとえば、このコードはFirefoxで正常に機能しますが、Chrome（12.0.742.112）：

<html>
  <head>
      <script>
        function animateSVG() {
          var svgNS = "http://www.w3.org/2000/svg";
          var textElement = document.getElementById("TextElement");
          var amElement = document.createElementNS(svgNS, "animateMotion");
          console.log(textElement);
          console.log(amElement);
          console.log(amElement.nodeName);
          amElement.setAttribute("path", "M 0 0 L 100 100");
          amElement.setAttribute("dur", "5s");
          amElement.setAttribute("fill", "freeze");
          textElement.appendChild(amElement);
          //amElement.beginElement();
        };
      </script>
  </head>
  <body onload="animateSVG()">
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
      <g transform="translate(100,100)">
        <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24">
          It's SVG!
          <!-- <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze"/> -->
        </text>
      </g>
    </svg>
  </body>
</html>

私の問題は、おそらくChrome（ Issue 13585 ）でのanimateMotionの壊れた処理に関係しています。

あなたの問題は同じかもしれませんし、別の問題かもしれませんが、要素インスペクタにだまされていないことを確認してください。

11
dlitz

同様の問題を解決しました。 document.createElement（およびdocument.createElementNSを想定）は、HTMLページから呼び出されると、xmlノードではなくHTMLノード（大文字と小文字は区別されません）を作成します。

以下はChromeで動作します：

doc = document.implementation.createDocument（null、null、null）; doc.createElementNS（ "http://www.w3.org/2000/svg"、 "textPath"）;

大文字と小文字が混在するノードを取得します。

2
Markus De Freitas