36

良い一日、

パスを作成し、SVG 要素内で「appendChild」を使用して表示するのが非常に困難です。

W3C の仕様、w3schools.com、ここのさまざまな投稿に注いだり、さまざまな方法で Google に忍び込もうとしたりすると、非常に単純なものが欠けているに違いありません。

FireFox と Chrome でテストしています。

したがって、単純なsvgファイルがあります： 

<svg xmlns:svg ... id="fullPageID">
 <image id="timer1" x="100" y="100" width="100px" height="100px" xlink:href="../component/timer/timer1.svg" />  
 <image id="battery1" x="200" y="200" width="100px" height="100px" xlink:href="../component/battery/30x20_ochre.svg" />
 <script xlink:href="pathMaker.js" type="text/javascript" id="pathMaker" />  
</svg>

私が使用しようとしているスクリプトは次のようになります。 

newpath = document.createElementNS("SVG","path");  
newpath.setAttribute("id", "pathIdD");  
newpath.setAttribute("d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttribute("stroke", "black");  
newpath.setAttribute("stroke-width", 3);  
newpath.setAttribute("opacity", 1);  
newpath.setAttribute("fill", "none");

document.getElementById("fullPageID").appendChild(newpath);

シンプルなものを作りたいだけです。Javascript で SVG パスを生成するために Library にあるような複雑なソリューションを必要としないと考えるのは間違っていますか? ?

よろしくお願いします。

4

3 に答える 3

48

2 つの問題があります。

  1. すでに指摘したように、完全な名前空間 uri を使用する必要があるため、この場合は次のようになります。

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

  2. 属性も、名前空間を念頭に置いて設定する必要があります。null良いニュースは、名前空間 uri として渡すことができるということです。

    newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");

また、svg 名前空間の扱いを簡単にする 2 つの方法を次に示します (HTML に埋め込まれていないスタンドアロンの svg であると仮定します)。

  • svg 要素を参照するには、ID を指定する代わりに を使用できますdocument.rootElement。
  • document.rootElement.getAttribute(null, "xmlns")空の文字列を返します (このメソッドを使用して他の属性を要求することはできますが、代わりにdocument.rootElement.namespaceURI.

したがって、コードでは、次のように書き換えることができます。

から：

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

に：

 newpath = document.createElementNS(document.rootElement.namespaceURI,"path");

要素を追加するには、次の場所から移動できます。

document.getElementById("fullPageID").appendChild(newpath);

に：

document.rootElement.appendChild(newpath);

したがって、最終的なスクリプトは次のようになります。

newpath = document.createElementNS(document.rootElement.namespaceURI,"path");  
newpath.setAttributeNS(null, "id", "pathIdD");  
newpath.setAttributeNS(null, "d", "M 1,97.857143 C 19.285714,96.428571 24.016862,131.64801 90.714286,132.85714 140.78762,133.7649 202.79376,66.16041 202.79376,66.16041");  
newpath.setAttributeNS(null, "stroke", "black"); 
newpath.setAttributeNS(null, "stroke-width", 3);  
newpath.setAttributeNS(null, "opacity", 1);  
newpath.setAttributeNS(null, "fill", "none");

document.rootElement.appendChild(newpath);
于 2012-05-11T06:46:47.663 に答える
4

名前空間は、呼び出しの「SVG」ではなく、「http://www.w3.org/2000/svg」である必要がありcreateElementNSます。

于 2012-05-11T06:13:30.133 に答える