मैं svg सीख रहा हूँ और विभिन्न ब्राउज़रों पर svg आइटम प्रदर्शित करने की तुलना करना चाहता हूँ। मेरा कोड फ़ायरफ़ॉक्स, क्रोम, एज, सफारी इत्यादि पर ठीक काम करता है, लेकिन यानी 11 पर काम नहीं कर सकता। दुर्भाग्य से मेरे द्वारा विकसित किए गए एप्लिकेशन को यानी 11 का समर्थन करने की आवश्यकता है, इसलिए मुझे अपने कोड को सही तरीके से काम करने के लिए मजबूर करने की आवश्यकता है।

ये रहा बेला: https://jsbin.com/hemawaboqa/1/edit? html,js,आउटपुट

एचटीएमएल

<!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>

जे एस

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

वह कोड यानी 11 पर काम क्यों नहीं कर रहा है?

0
Adam Mrozek 15 मार्च 2020, 14:02

2 जवाब

आप जिस पुस्तकालय का उपयोग कर रहे हैं उसमें ईसीएमए 6 तत्व हैं जो आईई में समझ में नहीं आते हैं। यदि आपको IE में काम करने के लिए अपनी परियोजना की आवश्यकता है, तो आपको किसी अन्य पुस्तकालय का उपयोग करना होगा या यह पता लगाना होगा कि इसे कैसे बदला जाए ताकि यह पुराने ब्राउज़रों के लिए अनुमति दे (जैसा कि यहां सुझाया गया है: https://svgjs.dev/docs/3.0/compatibility/)

0
wout 9 जून 2021, 20:23

मैंने आपके कोड के साथ SVG.js 3.0 संस्करण का उपयोग करके एक नमूना बनाया है, यह IE11 ब्राउज़र में "ऑब्जेक्ट संपत्ति या विधि का समर्थन नहीं करता है" दिखाएगा, शायद समस्या svg.js संस्करण से संबंधित है, और यह एक प्लगइन समस्या है, आप इस मुद्दे पर SVG.js फ़ोरम पर फ़ीडबैक दे सकते हैं।

इसके अलावा, मेरा सुझाव है कि आप 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
Zhi Lv 16 मार्च 2020, 05:40