Question

我需要使用SVG / polyline元素动态创建迷你图，带有纯HTML的示例可以完美地工作，当我使用JavaScript创建元素并添加属性时出现问题。

创建元素的功能

const yourDateMilliseconds = yourDate.getTime()
const actualTimeMilliseconds = new Date().getTime()
if (actualTimeMilliseconds - yourDateMilliseconds > 86400000) {
  console.log(yourDate)
}

在这里，我创建SVG元素并将其添加到名为filter_r_inner的div中，然后添加属性。

import { format } from 'moment'

在这里，我创建折线元素并将其添加到SVG元素中，然后添加属性。

    function createElement(type, attributes, someElement) {
        var element = type == "svg" ? document.createElementNS('http://www.w3.org/2000/svg', 'svg') : document.createElement(type);
        for (var key in attributes) {
            if (key === "class") {
                var cls = attributes[key];
                for (var c in cls)
                    element.classList.add(cls[c]);
            } else {
                element[key] = attributes[key];
            }
        }
        someElement.appendChild(element);
    }

以上内容并未像我期望的那样呈现SVG迷你图，但是添加了所有属性，但未显示任何内容。

我也尝试过从this问题中以这种方式添加积分，这给了我一个weekly_svg.points错误的定义

                    var newElement = createElement("svg", {
                        "class": ['mktcap_spark'],
                        "id": "weekly_svg",
                        "viewBox": "0 0 500 100"
                    }, filter_r_inner);
                    var weekly_svg = document.getElementById("weekly_svg");
                    weekly_svg.setAttribute("viewBox", "0 0 500 100");

我也研究了setAttributeNS，但是它需要一个“命名空间”，我尝试了一下，但是仍然没有显示。

                    var newElement = createElement("polyline", {
                        "id": "weekly_poly"
                    }, weekly_svg);
                    var weekly_poly = document.getElementById("weekly_poly");
                    weekly_poly.setAttribute('points', "00,120 20,60 40,120 60,10 80,80 100,80 120,60 140,100 160,90 180,80 200, 110 220, 10 240, 70 260, 100 280, 100 300, 40 320, 0 340, 100 360, 100 380, 120 400, 60 420, 70 440, 80 460, 20 480, 50 500, 30");
                    weekly_poly.setAttribute("fill", "none");
                    weekly_poly.setAttribute("stroke", "#e9be3d");
                    weekly_poly.setAttribute("stroke-width", "8");

此处的示例与纯HTML完美搭配。

            var point = weekly_svg.createSVGPoint();
            point.x = 10;
            point.y = 20;
            weekly_poly.points.appendItem(point);

它呈现出一个像这样的迷你图

CSS

.mktcap_spark {

        weekly_poly.setAttributeNS('http://www.w3.org/2000/svg', 'points', "00,120 20,60 40,120 60,10 80,80 100,80 120,60 140,100 160,90 180,80 200, 110 220, 10 240, 70 260, 100 280, 100 300, 40 320, 0 340, 100 360, 100 380, 120 400, 60 420, 70 440, 80 460, 20 480, 50 500, 30");
        weekly_poly.setAttributeNS('http://www.w3.org/2000/svg', "fill", "none");
        weekly_poly.setAttributeNS('http://www.w3.org/2000/svg', "stroke", "#e9be3d");
        weekly_poly.setAttributeNS('http://www.w3.org/2000/svg', "stroke-width", "8");

Answer 1

这里有两件事是我想到的。首先是您创建了一个与已经存在的函数匹配的函数。这个想法并不完全可靠-它会破裂，将来您会哭泣。

接下来是您使用createElement的（非svg）常规dom方法-嗯，使用svgs不能做，您需要使用createElementNS函数。

利用一些旧代码，我想出了类似以下内容：

window.addEventListener('load', onDocLoad, false);

function onDocLoad(evt) {
  document.body.appendChild(makeSVG(svgData));
}


var svgData = [{
    type: 'svg',
    data: {
      viewBox: "0 0 500 100"
    }
  },
  {
    type: 'polyline',
    data: {
      fill: "none",
      stroke: "#e9be3d",
      strokeWidth: "8",
      points: "00,120 20,60 40,120 60,10 80,80 100,80 120,60 140,100"
    }
  },
];


function getNode(n, v) {
  n = document.createElementNS("http://www.w3.org/2000/svg", n);
  for (var p in v) {
    n.setAttributeNS(null, p.replace(/[A-Z]/g, function(m, p, o, s) {
      return "-" + m.toLowerCase();
    }), v[p]);
  }
  return n
}

function makeSVG(data) {
  var result;
  data.forEach(
    function(elem, index, array) {
      if (index)
        result.appendChild(getNode(elem.type, elem.data));
      else
        result = getNode(elem.type, elem.data);
    }
  );
  return result;
}

使用JavaScript创建元素时，SVG折线不会显示点

1 个答案: