Полилиния SVG не будет отображать точки, когда элементы создаются с помощью JavaScript

Мне нужно динамически создавать спарклайны с элементами SVG/polyline, образец с чистым HTML отлично работает, проблема возникает, когда я создаю элементы с помощью JavaScript и добавляю атрибуты.

Функция для создания элементов

    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 и добавляю его в div с именем filter_r_inner, а затем добавляю атрибуты.

                    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");

Здесь я создаю элемент полилинии и добавляю его к элементу SVG, а затем добавляю атрибуты.

                    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");

Приведенное выше не отображает спарклайн SVG, как я ожидал, однако все атрибуты добавлены, но ничего не отображается.

Я также пробовал добавлять точки таким образом из этого вопрос, это дает мне ошибку weekly_svg.points is undefined

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

Я также просмотрел setAttributeNS, но для этого требовалось «пространство имен», я пробовал это, но все равно ничего не показывает.

        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");

Этот пример отлично работает с чистым HTML.

<svg viewBox="0 0 500 100" class="mktcap_spark">
                    <polyline
                        fill="none"
                        stroke="#e9be3d"
                        stroke-width="8"
                        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
                        "
                        />

                    </svg>

Он отображает спарклайн, выглядящий так

введите здесь описание изображения

CSS

.mktcap_spark {

  width: 130px;
  height: 50px;
  min-width: 130px;
}

javascript svg html polyline
person ii iml0sto1    schedule 18.09.2018    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Здесь на ум приходит несколько вещей. Во-первых, вы создали функцию, которая соответствует уже существующей. Не совсем надежная идея — она сломается, и вы будете плакать в какой-то момент в будущем.

Следующее, что вы используете (не svg) обычный метод dom из createElement - э-э-э, нет, при работе с 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;
}

person enhzflep    schedule 18.09.2018
comment
Теперь я ТОЧНО помню, почему я сделал эту функцию, и это должно было избежать проблемы «viewBox» для окна просмотра и «strokeWidth» для проблемы «штрих-ширины» (viewBox превратится в окно просмотра, которое не будет работать, в ваш пример).... И, кстати, функция никогда не ломалась, она работает гладко, она проста в использовании и работает. спасибо за ответ в любом случае, это заставило меня понять, что я сделал неправильно. - person ii iml0sto1; 25.09.2018