-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 半径{r} 设置为可变的爱。） - 感谢 Josh

编辑 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 回答