Question

为什么在任何当前浏览器中都不会渲染此路径？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
</head>
<body>
   <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="500px" height="500px"
        id="svgArea">
      <script type="text/javascript"><![CDATA[
         var svgNS = "http://www.w3.org/2000/svg";
         var svgArea = document.getElementById ('svgArea');
         var spline = document.createElementNS(svgNS, "path");
         spline.setAttributeNS (svgNS, "d", "M0,300 C0,400 100,300 100,400");
         svgArea.appendChild(spline);
         ]]>
      </script>
   </svg>
</body>
</html>

然而，如果您通过firebug检查DOM，您将看到路径已正确添加到svg区域。此外，如果您将生成的SVG路径声明复制并返回到html文件和svg标记内，则路径将呈现。

我确定我错过了一些令人尴尬的简单。自己复制并粘贴代码，看看它是否适合您。

Answer 1

虽然元素在SVG名称空间中，但属性却不是。所以你想要

spline.setAttribute("d", "M0,300 C0,400 100,300 100,400");

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
</head>
<body>
   <svg xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        width="500px" height="500px"
        id="svgArea">
      <script type="text/javascript"><![CDATA[
         var svgNS = "http://www.w3.org/2000/svg";
         var svgArea = document.getElementById ('svgArea');
         var spline = document.createElementNS(svgNS, "path");
         spline.setAttribute("d", "M0,300 C0,400 100,300 100,400");
         svgArea.appendChild(spline);
         ]]>
      </script>
   </svg>
</body>
</html>

＆＃13;

通过Javascript的简单路径将无法呈现

1 个答案: