使用 svg.js 加载 SVG 文件

Question

我在 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;

错误：

我做错了或遗漏了一些东西。

有什么帮助吗？

Answer 1

JQuery 的 $.get，对于 SVG，默认返回一个代表 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

Answer 2

使用 jQuery 这种形式在 2.7.1 和 3 中都有效。0.x 我测试了

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

使用 svg.js 加载 SVG 文件

Load SVG file with svg.js

javascript

svg

svg.js