简单的SVG项目在Internet Explorer 11上导致错误

Question

我正在学习svg，并希望比较在不同浏览器上显示的svg项目。我的代码在firefox，chrome，edge，safari等上运行良好，但在ie11上无法运行。不幸的是，我开发的应用程序需要支持ie11，因此我需要强制代码正常工作。

这里是小提琴：https://jsbin.com/hemawaboqa/1/edit?html,js,output

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上运行？

Answer 1

您正在使用的库具有IE中无法理解的ECMA 6元素。如果您需要您的项目在IE中运行，则必须使用另一个库或找出如何对其进行更改，以便允许较旧的浏览器使用（如此处建议：https://svgjs.com/docs/3.0/compatibility/）

Answer 2

我已经使用SVG.js 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>

结果如下：

简单的SVG项目在Internet Explorer 11上导致错误

问题描述投票：0回答：2

2个回答

最新问题

简单的SVG项目在Internet Explorer 11上导致错误

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2