-1 
    var circle;
    var love = 30;

      document.getElementById("output"). innerHTML=("

     The Circle is __ Units with an Area of __
                    <svg version='1.1'
      width='360' height='300'
      xmlns='http://www.w3.org/2000/svg'>

          <circle  cx='50%' cy='50%' r='" + love  + " %'  stroke='black' 
          stroke-width='2' fill='red'/>
        </svg>");

ここに構文エラーがあることは知っていますが、ブロック内の多数の引用符に関係していると確信しています。もっと細い紐にして組み合わせてみようかな。PHP の .= のようなものですか? (ブロックの全体的なポイントは、SVG radius{r} を変数 love に設定することです。) - ジョシュに感謝します。

編集 2 # (コミュニティ サポートのおかげで、すてきな作業コードがいくつかあります)

            var love = 30;
            var va1 = "The Circle is __ Units with an Area of __ ";
                    var va2 =" <svg version='1.1' width='360' height='300' xmlns='http://www.w3.org/2000/svg'>" ;
                    var va3 = " <circle  cx='50%' cy='50%' r='" ;
                    var va4 =  "%'  stroke='black'  stroke-width='2' fill='red'/> </svg>";
                  document.getElementById("output"). innerHTML=(va1+ va2 + va3 + love +va4);
4

2 に答える 2

3

\複数行の文字列にエスケープ記号を使用する

このような

 var circle;
 var love = 30;

  document.getElementById("output"). innerHTML=(" \
        The Circle is __ Units with an Area of __ \
                <svg version='1.1' \
                width='360' height='300' \
                xmlns='http://www.w3.org/2000/svg'> \
                <circle  cx='50%' cy='50%' r='" + love  + "%'  stroke='black'  \
               stroke-width='2' fill='red'/> \
               </svg>");
于 2013-04-06T02:19:27.990 に答える
0

正直なところ、連結や行末マーカーは避けて、これらの要素を構築するだけです。私の意見では、コードははるかに脆くなく、目に優しい. これは、オブジェクト リテラルのメンバーを要素の属性にマップするための小さなヘルパー関数を含めて、以下で行ったことです。

オンラインで表示: http://jsfiddle.net/jonathansampson/er9ys/

// References and values we'll be needing
var out = document.querySelector("body"), 
    nsp = "http://www.w3.org/2000/svg", 
    lov = 30;

// Build our message, svg element, and circle
var msg = document.createTextNode("Circle is _ Units, w/ an Area of _");
var svg = makeEl(nsp, "svg", { version: 1.1, height: 300, width: 360 });
var ccl = makeEl(nsp, "circle", { cx: "50%", cy: "50%", r: lov + "%" });

// Add children to appropriate parents
svg.appendChild(ccl);
out.appendChild(msg);
out.appendChild(svg);

// Small utility for adding attrs
function makeEl ( namespace, tag, attrs ) {
    var el = document.createElementNS(namespace, tag), prop;
    for ( prop in attrs ) 
        el.setAttribute( prop, attrs[prop] );
    return el;
}
于 2013-04-06T04:43:08.890 に答える