Question

我正在使用JavaScript动态创建SVG圆环图。

通过以下代码将空SVG元素添加到页面中：

＆＃13;

//Create the svg element
        var element = document.createElementNS(
          'https://www.w3.org/2000/svg',
          'svg'
        );
        element.setAttribute('id', graphName);
        element.setAttribute('height', parentHeight);
        element.setAttribute('width', parentWidth);
        element.setAttribute('xmlns', 'http://www.w3.org/2000/svg');

        //Add the SVG element to the page
        $(".circle-navigation[data-graphName='" + graphName + "']").after(
          element
        );

＆＃13;

然后实例化一个对象，其中包含绘制图表所需的所有代码。然后调用单个方法Draw。

以下是Draw方法可能生成的HTML代码示例：

＆＃13;

<svg id="982385" height="470" width="470" xmlns="http://www.w3.org/2000/svg">
  <a href="#">
    <path d="M235 0 A235 235 0 0 1 401.17009357883865 68.82990642116133 L235 235 Z" fill="#262626"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="255.9537377371974" y="80.2588732398984">1. Designing</tspan>
      <tspan x="253.9537377371974" y="98.2588732398984">assessments</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M401.17009357883865 68.82990642116133 A235 235 0 0 1 470 234.99999999999997 L235 235 Z" fill="#393939"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="340.24112676010157" y="160.0462622628026">2. Setting an</tspan>
      <tspan x="357.24112676010157" y="178.0462622628026">holding</tspan>
      <tspan x="338.74112676010157" y="196.0462622628026">assessments</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M470 234.99999999999997 A235 235 0 0 1 401.17009357883865 401.17009357883865 L235 235 Z" fill="#4c4c4c"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="341.74112676010157" y="279.9537377371974">3. Preparing</tspan>
      <tspan x="333.24112676010157" y="297.9537377371974">and supporting</tspan>
      <tspan x="353.24112676010157" y="315.9537377371974">students</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M401.17009357883865 401.17009357883865 A235 235 0 0 1 235.00000000000003 470 L235 235 Z" fill="#5f5f5f"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="262.4537377371974" y="369.74112676010157">4. Marking</tspan>
      <tspan x="253.9537377371974" y="387.74112676010157">assessments</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M235.00000000000003 470 A235 235 0 0 1 68.82990642116135 401.1700935788387 L235 235 Z" fill="#737373"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="138.04626226280263" y="369.74112676010157">5. Providing</tspan>
      <tspan x="146.54626226280263" y="387.74112676010157">feedback</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M68.82990642116135 401.1700935788387 A235 235 0 0 1 0 235.00000000000006 L235 235 Z" fill="#868686"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="59.25887323989846" y="289.95373773719746">6. Results</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M0 235.00000000000006 A235 235 0 0 1 68.8299064211613 68.82990642116138 L235 235 Z" fill="#999999"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="49.75887323989838" y="155.0462622628027">7. Examining</tspan>
      <tspan x="55.25887323989838" y="173.0462622628027">boards and</tspan>
      <tspan x="65.25887323989838" y="191.0462622628027">external</tspan>
      <tspan x="57.75887323989838" y="209.0462622628027">examiners</tspan>
    </text>
  </a>
  <a href="#">
    <path d="M68.8299064211613 68.82990642116138 A235 235 0 0 1 234.99999999999994 0 L235 235 Z" fill="#acacac"></path>
    <text fill="#ffffff" font-size="14">
      <tspan x="136.04626226280251" y="80.25887323989846">8. Reflecting</tspan>
      <tspan x="132.04626226280251" y="98.25887323989846">and reviewing</tspan>
    </text>
  </a>
  <circle cx="235" cy="235" r="94" fill="white"></circle>
</svg>

＆＃13;

代码在可用时插入到DOM中。更具体地说，代码在生成和插入图表时遵循以下过程：

对每个需要的细分和标签重复

生成细分代码
将网页代码添加到网页
生成标签
向页面添加标签

生成的HTML应该呈现。但事实并非如此。页面加载后，我的输出如下：

破碎的输出：

非常感谢任何建议和帮助。

注意，这个问题不是this question的重复，因为我的问题不在于将代码附加到DOM，而是渲染它。

浏览器不呈现动态创建的SVG HTML

0 个答案: