SVG 文件中的 Javascript

Question

我有一个特殊的要求，因为我想直接在 SVG 文件中生成一个 SVG ;)到目前为止，我已经使用生成 SVG 标签制作了以下代码，但屏幕上没有显示任何内容。我可能做错了什么，但我不知道在哪里，因为它不会抛出任何错误。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet" id="content">
  <defs>
    <style type="text/css"><![CDATA[
      @font-face {font-family: 'Futura-Heavy'; src: url(../public/css/FuturaStd/FuturaStd-Heavy.otf) format('opentype');}
      @font-face {font-family: 'Futura-Light'; src: url(../public/css/FuturaStd/FuturaStd-Light.otf) format('opentype');}
      @font-face {font-family: 'Bryant-Regular'; src: url(../public/css/Bryant/Bryant_Pro/BryantPro-Regular.otf) format('opentype');}

      .title{
        font-family: 'Futura-Heavy', 'Helvetica Neue', sans-serif, Helvetica;
        font-size: 14pt;
        stroke: none;
        fill: white;
        letter-spacing: 2px;
        text-anchor: middle;
      }

      .subtitle{
        font-family: 'Bryant-Regular', 'Helvetica Neue', sans-serif, Helvetica;
        font-size: 14pt;
        stroke: none;
        fill: grey;
        letter-spacing: 2px;
      }
    ]]></style>
  </defs>
  <script type="text/javascript"><![CDATA[
    var data = {
      "measures" : {
        "avg" : 0.68,
        "value" : 0.2
      },
      "config" : {
        "width" : 150,
        "height" : 180,
      },
      "titles" : {
        "right_eye" : "RIGHT EYE",
        "left_eye" : "LEFT EYE",
        "as_of" : "AS {0}% OF PEOPLE"
      }
    };
    var width = data.config.width || 1500;                          // Longueur totale
    var height = data.config.height || 1000;                        // Hauteur totale
    var widthVis = 330;                                                       // Longueur de la visualisation
    var heightVis = 300;                                                      // hauteur de la visualisation
    var heightBar = 25;                                                       // Hauteur du cadre
    var color = data.measures.color || ["#FFC400", "#18B4DC"];  // couple de couleurs
    var widthBar = widthVis * 0.8;                                      // Longueur du cadre
    data.config.host = data.config.host || '../public';         // Path to resources

    var format_string = function() {
      var mString = arguments[0];
      for (var i=1; i<arguments.length; i++) {
        var regEx = new RegExp("\\{" + (i - 1) + "\\}", "gm");
        mString = mString.replace(regEx, arguments[i]);
      }
      return mString;
    };

    var svg = document.getElementById('content');
    svg.setAttribute('height', height +'px');
    svg.setAttribute('width', width +'px');
    svg.setAttribute('viewBox', '0 0 ' + widthVis + ' ' + heightVis);

    var viz = document.createElement('g');
    viz.setAttribute('id', 'viz');
    viz.setAttribute('transform', 'translate(' + widthVis * 0.1 + ')');
    svg.appendChild(viz);

    // Create gradient
    var defs = document.getElementsByTagName('defs')[0];
    var categoryGradient = document.createElement('linearGradient');
    categoryGradient.setAttribute('id', 'categoryRelativeGradient');
    categoryGradient.setAttribute('x1', '0%');
    categoryGradient.setAttribute('x2', '100%');
    categoryGradient.setAttribute('y1', '0%');
    categoryGradient.setAttribute('y2', '0%');
    defs.appendChild(categoryGradient);
    var stop1 = document.createElement('stop');
    stop1.setAttribute('offset', '0%');
    stop1.setAttribute('stop-color', color[0]);
    stop1.setAttribute('stop-opacity', 1);
    categoryGradient.appendChild(stop1);
    var stop2 = document.createElement('stop');
    stop2.setAttribute('offset', (data.measures.avg*100) + '%');
    stop2.setAttribute('stop-color', color[0]);
    stop2.setAttribute('stop-opacity', 1);
    categoryGradient.appendChild(stop2);
    var stop3 = document.createElement('stop');
    stop3.setAttribute('offset', (data.measures.avg*100) + '%');
    stop3.setAttribute('stop-color', color[1]);
    stop3.setAttribute('stop-opacity', 1);
    categoryGradient.appendChild(stop3);
    var stop4 = document.createElement('stop');
    stop4.setAttribute('offset', '100%');
    stop4.setAttribute('stop-color', color[1]);
    stop4.setAttribute('stop-opacity', 1);
    categoryGradient.appendChild(stop4);

    // Create legend
    var forme = document.createElement('g');
    forme.setAttribute('id', 'path');
    forme.setAttribute('transform', 'translate(0, ' + heightVis * 0.6 + ')');
    viz.appendChild(forme);
    var circle1 = document.createElement('circle'); // Round corners
    circle1.setAttribute('cx', 0);
    circle1.setAttribute('cy', 0);
    circle1.setAttribute('r', heightBar / 2);
    circle1.setAttribute('fill', color[0]);
    forme.appendChild(circle1);
    var circle2 = document.createElement('circle'); // Round corners
    circle2.setAttribute('cx', widthBar);
    circle2.setAttribute('cy', 0);
    circle2.setAttribute('r', heightBar / 2);
    circle2.setAttribute('fill', color[1]);
    forme.appendChild(circle2);
    var rect1 = document.createElement('rect'); // Frame
    rect1.setAttribute('x', 0);
    rect1.setAttribute('y', - heightBar / 2);
    rect1.setAttribute('height', heightBar);
    rect1.setAttribute('width', widthBar);
    rect1.setAttribute('fill', 'url(#categoryRelativeGradient)');
    forme.appendChild(rect1);
    var circle3 = document.createElement('circle'); // Extreme points
    circle3.setAttribute('cx', 0);
    circle3.setAttribute('cy', 0);
    circle3.setAttribute('r', heightBar / 4);
    circle3.setAttribute('fill', 'black');
    forme.appendChild(circle3);
    var circle4 = document.createElement('circle'); // Extreme points
    circle4.setAttribute('cx', widthBar);
    circle4.setAttribute('cy', 0);
    circle4.setAttribute('r', heightBar / 4);
    circle4.setAttribute('fill', 'black');
    forme.appendChild(circle4);
    var dotted_line; // Dotted line
    for(var index = widthBar / 20; index < widthBar; index += widthBar / 20) {
      dotted_line = document.createElement('circle');
      dotted_line.setAttribute('cx', index);
      dotted_line.setAttribute('cy', 0);
      dotted_line.setAttribute('r', heightBar / 12);
      dotted_line.setAttribute('fill', 'black');
      forme.appendChild(dotted_line);
    }

    // Textual information
    var legend = document.createElement('g');
    legend.setAttribute('id', 'legend');
    legend.setAttribute('transform', 'translate('+(data.measures.value < 0.5 ? 0 : widthBar)+', ' + heightVis * 0.15 + ')');
    viz.appendChild(legend);
    var rect_width = data.measures.value < 0.5 ? data.titles.left_eye.length * 15 : data.titles.right_eye.length * 15;
    var legend_title = document.createElement('g');
    legend_title.setAttribute('transform', 'translate('+(data.measures.value < 0.5 ? 0 : -rect_width)+', 0)');
    legend.appendChild(legend_title);
    var rect2 = document.createElement('rect'); // Back rectangle
    rect2.setAttribute('x', 0);
    rect2.setAttribute('y', 0);
    rect2.setAttribute('height', 40);
    rect2.setAttribute('width', rect_width);
    rect2.setAttribute('fill', 'black');
    legend_title.appendChild(rect2);
    var text1 = document.createElement('text'); // Legend text
    text1.setAttribute('class', 'title');
    text1.setAttribute('x', rect_width - 30);
    text1.setAttribute('y', 27);
    text1.setAttribute('height', 40);
    text1.setAttribute('width', rect_width);
    text1.setAttribute('fill', 'white');
    text1.setAttribute('stroke', 'none');
    text1.setAttribute('text-anchor', (data.measures.value < 0.5 ? 'begin' : 'end'));
    text1.appendChild( document.createTextNode(data.measures.value < 0.5 ? data.titles.left_eye : data.titles.right_eye) );
    legend_title.appendChild(text1);

    // Legend sub-text
    var as_of_text = data.titles.as_of.toString();
    var as_of_text_part1 = as_of_text.substr(0, as_of_text.indexOf("%") + 1);
    var as_of_text_part2 = as_of_text.substr(as_of_text.indexOf("%") + 1, as_of_text.length);
    as_of_text_part1 = format_string(as_of_text_part1, (data.measures.value < 0.5 ? data.measures.avg*100 : ((1 - data.measures.avg)*100).toFixed()));
    var subtext1 = document.createElement('text');
    subtext1.setAttribute('class', 'subtitle');
    subtext1.setAttribute('x', (data.measures.value < 0.5 ? 5 : - 5));
    subtext1.setAttribute('y', 65);
    subtext1.setAttribute('fill', 'black');
    subtext1.setAttribute('text-anchor', (data.measures.value < 0.5 ? 'begin' : 'end'));
    subtext1.appendChild( document.createTextNode(as_of_text_part1) );
    legend.appendChild(subtext1);
    var subtext2 = document.createElement('text');
    subtext2.setAttribute('class', 'subtitle');
    subtext2.setAttribute('x', (data.measures.value < 0.5 ? 5 : - 5));
    subtext2.setAttribute('y', 85);
    subtext2.setAttribute('fill', 'black');
    subtext2.setAttribute('text-anchor', (data.measures.value < 0.5 ? 'begin' : 'end'));
    subtext2.appendChild( document.createTextNode(as_of_text_part2) );
    legend.appendChild(subtext2);

    // Vertical line
    var line = document.createElement('line');
    line.setAttribute('class', 'gaugeMark');
    line.setAttribute('x1', 0);
    line.setAttribute('x2', 0);
    line.setAttribute('y1', 0);
    line.setAttribute('y2', heightVis * 0.45);
    line.setAttribute('fill', 'black');
    line.setAttribute('stroke', 'black');
    legend.appendChild(line);
  ]]></script>
</svg>

我在 Chrome 开发者控制台中看到这段代码时出现白屏，我得到的东西看起来是一个有效的 SVG。

你能帮我解决这个问题吗？我几乎可以肯定我离解决方案不远了。

谢谢

Answer 1

SVG 元素必须在 SVG 命名空间中创建，因此您需要使用 createElementNS 而不是 createElement 来创建它们，例如

var viz = document.createElementNS('http://www.w3.org/2000/svg', 'g');