0

I am learning svg and would like to compare displaying svg items on different browsers. My code works fine on firefox, chrome, edge, safari etc, but cannot work on ie11. Unfortunately application I develop needs to support ie11 so I need to force my code to work correctly.

Here is fiddle: 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)

Why that code is not working on ie11?

Improve this question

2 Answers 2

Reset to default
0

I have created a sample using the SVG.js 3.0 version with your code, it will show the "Object doesn't support property or method 'from'" in IE11 browser, perhaps the issue is related to the svg.js version, and it is a plugin issue, you could feedback this issue to SVG.js forum.

Besides, I suggest you could refer to the following code, to use the old version of 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>

The result as below:

enter image description here

Improve this answer
0

The library you are using has ECMA 6 elements that are not understood in IE. If you need your project to work in IE, you will have to use another library or find out how to change it so it allows for older browsers (as suggested here: https://svgjs.dev/docs/3.0/compatibility/)

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.