Простой SVG-проект вызывает ошибку в Inte rnet Explorer 11 - PullRequest
Новая
       8

Простой SVG-проект вызывает ошибку в Inte rnet Explorer 11

0 голосов
/ 15 марта 2020

Я изучаю svg и хотел бы сравнить отображение элементов svg в разных браузерах. Мой код отлично работает на firefox, chrome, edge, safari et c, но не может работать на ie11. К сожалению, приложение, которое я разрабатываю, должно поддерживать ie11, поэтому мне нужно заставить мой код работать правильно.

Вот скрипка: https://jsbin.com/hemawaboqa/1/edit?html, js, вывод

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js"></script>
</head>
<body>
    <div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
        <div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="svg-canvas"></div>
    </div>
</body>
</html>

JS

var draw = SVG().addTo('#svg-canvas').size(400, 400)
var rect = draw.rect(100, 100)

Почему этот код не работает на ie11?

Ответы [ 2 ]

0 голосов
/ 16 марта 2020

Я создал пример с использованием SVG. * Версия 1014 * 3.0 с вашим кодом, в браузере IE11 будет отображаться «Объект не поддерживает свойство или метод« from »», возможно, проблема связана с svg. . js версия, и это проблема с плагином, вы можете отправить эту проблему на SVG. js forum .

Кроме того, я предлагаю вам обратиться к следующему коду: использовать старую версию SVG. js: 

<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8>
<title>TEST</title>
</head>
<body>
  <div style="position:absolute;left:0px;top:0px;right:0px;bottom:0px;overflow:hidden;" id="svg-main-container">
        <div style="position:absolute;left:0px;top:0px;bottom:0px;right:300px;border:1px solid #dadada;overflow:auto;" id="drawing">
        </div>
  </div>
<script src=https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.6/svg.min.js></script>
<script>
(function () {
'use strict';
// Add title as first child of SVG element:
var createTitle = function (svgObject, text) {
    var fragment = document.createDocumentFragment();
    var titleElement = document.createElement('TITLE');
    fragment.appendChild(titleElement);
    titleElement.innerHTML = text;
    svgObject.node.insertAdjacentElement('afterbegin', titleElement);
};
    SVG.extend(SVG.Doc, {
         namespace: function () {
         return this
         .attr({xmlns: 'http://www.w3.org/2000/svg', version: '1.1'})
         .attr('xmlns:xlink', SVG.xlink, SVG.xmlns);
    }
});
var draw = new SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({fill: '#f06'});
// Add title to SVG element
createTitle(draw, 'Rectangle'); 
}());
</script>
</body>
</html>

Результат как показано ниже:

enter image description here

0 голосов
/ 15 марта 2020

В используемой вами библиотеке есть элементы ECMA 6, которые не поняты в IE. Если вам нужен ваш проект для работы в IE, вам придется использовать другую библиотеку или узнать, как ее изменить, чтобы она поддерживала старые браузеры (как здесь предлагается: https://svgjs.com/docs/3.0/compatibility/)

...