使用svg.js加载SVG文件

时间:2018-06-12 13:56:34

标签: javascript svg svg.js

我在SO中看到了与此主题相关的几个问题,并遵循它们(Loading a SVG file with svg.js)并且没有成功尝试加载svg文件。

__this.canvas = SVG('canvas').size(500, 500);
$.get('/cuentos/Rapunzel/prueba.svg', function(data) {
     __this.data = data;
     console.log(__this.data);
     __this.canvas.svg(__this.data);
});

__ this.canvas是 svgjs.Doc 的类型,它按以下方式导入:

import SVG from './node_modules/svg.js/svg.js';
declare var svgjs: (domElement: HTMLElement) => svgjs.Library;

错误:

enter image description here

我有些错误或缺失。

任何帮助?

2 个答案:

答案 0 :(得分:0)

对于SVG,JQuery的$.get默认返回一个表示SVG的DOM对象。但是,SVG.js的svg函数需要一个字符串。

您可以简单地强制JQuery返回类似的字符串:

$.get('/cuentos/Rapunzel/prueba.svg', function(data) {
   __this.data = data;
   console.log(__this.data);
   __this.canvas.svg(__this.data);
}, 'text');

PS:我针对SVG.js打开了一个PR,以显示该案例的正确错误消息:https://github.com/svgdotjs/svg.js/pull/870

答案 1 :(得分:0)

使用jQuery,此表单在我测试过的2.7.1和3.0.x中均可使用

    var svgp = SVG($('#<name of svg>')[0]);