0

JavaScript を使用してパスを動的に作成しようとしていますが、d属性は引き続きUncaught SyntaxError: Unexpected token ILLEGAL.

var location = document.createElementNS(svgns,"path");
    location.setAttributeNS("fill-rule","evenodd");
    location.setAttributeNS("fill","#ffffff");
    location.setAttributeNS("clip-rule","evenodd");
    location.setAttributeNS(null,"d","M57.295,27.757c-11.896,0-21.539,9.643-21.539,21.539S57.295,86.5,57.295,86.5
    s21.539-25.309,21.539-37.205S69.19,27.757,57.295,27.757z M57.295,60.039c-6.373,0-11.539-5.166-11.539-11.539
    s5.166-11.539,11.539-11.539S68.833,42.127,68.833,48.5S63.667,60.039,57.295,60.039z");

    locationBTn.appendChild(locationStroke0);
    locationBTn.appendChild(location);

    document.getElementsByTagName('svg')[0].appendChild(locationBTn);
4

1 に答える 1

1

ここにあるようにパスデータを指定するときは注意してください。改行はトラブルの原因になります。

簡単な例として：

location.setAttributeNS(null,"d","M5.5,
27.2,
c11.89,
0-21.5,9.6");

と同じではありません

location.setAttributeNS(null,"d","M5.5,27.2,c11.89,0-21.5,9.6");

いくつかのオプションがあります。

A) すべてを 1 行にまとめます。

location.setAttributeNS(null,"d","M57.295,27.757c-11.896,0-21.539,9.64321.539,21.539S57.295,86.5,57.295,86.5s21.539-25.309,21.539-37.205S69.19,27.757,57.295,27.757z M57.295,60.039c-6.373,0-11.539-5.166-11.539-11.539s5.166-11.539,11.539-11.539S68.833,42.127,68.833,48.5S63.667,60.039,57.295,60.039z");

(これは読みにくく、操作しにくい場合があります)

B) 複数の文字列と + 演算子を使用します。

location.setAttributeNS(null,"d","M57.295,27.757"+
"c-11.896,0-21.539,9.64321.539,21.539S57.295,86.5,57.295,86.5s21.539-25.309,21.539-37.205S69.19,27.757,57.295,27.757z "+
"M57.295,60.039"+
"c-6.373,0-11.539-5.166-11.539-11.539s5.166-11.539,11.539-11.539S68.833,42.127,68.833,48.5S63.667,60.039,57.295,60.039z");

(おそらく最も一般的な解決策)

また

C) \ を使用して改行文字をエスケープし、複数行の文字列を取得します。

location.setAttributeNS(null,"d","M57.295,27.757c-11.896,0\
-21.539,9.64321.539,21.539S57.295,86.5,57.295,86.5s21.539-25.309,\
21.539-37.205S69.19,27.757,57.295,27.757z M57.295,60.039c-6.373,\
0-11.539-5.166-11.539-11.539s5.166-11.539,11.539\
-11.539S68.833,42.127,68.833,48.5S63.667,60.039,57.295,60.039z");

（奇妙だが有効な解決策）

SVG の「d」文字列で使用できる正確な文字の詳細については、http://www.w3.org/TR/SVG/paths.html#PathDataBNF を参照してください。

PS -locationStroke0);のタイプミスではないことを確認してくださいlocationStroke);!

于 2013-04-22T02:03:49.003 に答える