6567


**やりたいこと**

  * SVGのPATH要素を、JavaScriptでPOST送信
  * PHPでPOST受信して利用
  * 送信したいPATH要素

`<path d=" … 中略 … "></path>`

* * *

**現状**  
■JavaScript での送信内容

  * フォーム動的生成
  * input 要素に、path 要素を格納した target を追加

elem.setAttribute('value', target);

■動的生成後のHTML内容／コンソール画面

[code]

    <input type="hidden" name="hoge" value="[object SVGPathElement]">
    
[/code]

■ PHP での POST 受信内容

> [object SVGPathElement]

* * *

**質問**

`[object SVGPathElement]` ではなく、PATH 要素として受けとるためにはどうすれば良いでしょうか？

`console.log(target);` では、

[code]

    <path d=" … 中略 … "></path>
    
[/code]

と表示されるのに、フォームへセットすると、なぜ

[code]

    [object SVGPathElement]
    
[/code]

になるのでしょうか？


CC BY-SA 3.0
2015-02-15T03:42:15.420
6506
2015-02-16T09:23:48.343
2015-02-15T10:45:39.947
76
7886
question
javascript svg
SVGのPATH要素を、JavaScriptでPOST送信すると、受信内容が[object SVGPathElement]となる


`path` 要素のタグ自体（`<path>〜</path>`）をそのまま欲しい、という事でしたら、`outerHTML`
プロパティを利用することで取得出来ます。

[code]

    <script>
      // 対象となる path を取得
      var target = document.getElementsByTagName('svg')[0];
      var path = target.getElementsByTagName('path')[0];
    
      // path要素が文字列として返る
      console.log(path.outerHTML);
    </script>
    
[/code]


CC BY-SA 3.0
2015-02-16T09:15:51.863
6567
2015-02-16T09:15:51.863
2944
6506
answer


質問の中にはtargetの取得部分の記述はありませんが、  
**[object SVGPathElement]** はオブジェクト自体を引っ張ってきていると推察できます。

[code]

    <svg viewBox="0 0 50 50" id="svg1" >
        <path d="M10,10h10l-5,10z" id="path1" />
        <path d="M10,10h10l-5,10z" id="path2" />
    </svg>
    
[/code]

これだと1つ上のelementを掴んでhtmlごと文字列化したり

> document.getElementById("svg1").innerHTML

パラメータの文字列を個別に取得する必要があると思います。

> document.getElementById("path1").attributes['d'].value

パラメータだけを全部取得するならこの方がいいかな?

[code]

      var attr1 = document.getElementById("path1").attributes;
      for (var i = 0; i < attr1.length; i++) {
        属性名 = attr1[i].nodeName ;
        値     = attr1[i].value ;
      };
    
[/code]

他の要素も取得するのであれば場合によって  
**[element].parentNode** や **[element].childNodes** でDOMツリーを辿ってもいいでしょう。

適当ですが例です。

[code]

    var elemSvg = document.getElementById("svg1");
    var childSvg = elemSvg.childNodes; 
    var arry1 = new Array();
    for (var i = 0; i < childSvg.length; i++) {
        if (childSvg[i].attributes){
            var attr1 = childSvg[i].attributes;
            for (var j = 0; j < attr1.length; j++) {
                arry1.push(childSvg[i].nodeName+':'+attr1[j].nodeName+':'+attr1[j].value);
            }
        }
    };
    
[/code]


CC BY-SA 3.0
2015-02-16T09:23:48.343
6568
2015-02-16T09:23:48.343
5479
6506
answer