时间戳

首页 > 解决方案 > 如何将 SVG.js 3.0.x 版本正确导入 Typescript Create-React-App 项目

javascript - 如何将 SVG.js 3.0.x 版本正确导入 Typescript Create-React-App 项目

问题描述

由于我的问题主题没有在任何其他线程中得到详细回答，也没有在官方 Svg.js 网站上没有好的答案，我将其发布在一个新线程中，并详细说明了问题。

1. 我的开发堆栈是：

a.) CRA (create-react-app) - "react-scripts": "3.1.2"

b.) 打字稿 - “打字稿”：“3.6.3”

c.) SVG.js - "@svgdotjs/svg.js": "^3.0.13"

2. 我想要达到的目标：

我想正确导入 SVG.js，以便在 id="drawing" 的元素中使用它来在元素内绘制 svg 形状。

3.我的问题是：

如果我以这种方式导入我的 Svg.js 库：

import * as SVG from "@svgdotjs/svg.js";

或以这种方式：

import SVG from "@svgdotjs/svg.js/src/svg";

然后我以后不能在我的项目中以任何方式使用 SVG。

例如，这样做是行不通的：

let draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
let rect = draw.rect(100, 100).attr({fill: "#f06"})

使用上面显示的第二个导入时，我收到有关“找不到模块@svgdotjs/svg.js/src/svg 的声明文件”的消息

和

当使用上面我提出的第一个导入时，突然 Intellij Idea 显示代码中的类型但无法识别 SVG() 并说“此表达式不可调用。键入 'typeof import("@svgdotjs/svg.js") ' 没有呼叫签名。”

无论哪种方式，我都不能让它像它应该的那样工作。

我的测试代码在这里：

import React from 'react';
import * as SVG from "@svgdotjs/svg.js";
//import SVG from "@svgdotjs/svg.js/src/svg";
import './App.css';
const App: React.FC = () => {
  let draw = SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
  let rect = draw.rect(100, 100).attr({fill: "#f06"})
  return (
    <div className="App">
    SVG.js test :)
      <div id="drawing">
      </div>
    </div>
  );
}
export default App;

4. 我的问题是：

如何在带有typescript的create-react-app中成功导入和使用Svg.js？

只接受真正的解决方案而不是假设的答案。

此致！

标签： javascriptreactjstypescriptsvgsvg.js

解决方案

我做了更多这样的事情

import React from 'react';
import * as svgjs from "@svgdotjs/svg.js";
import './App.css';
const App: React.FC = () => {
  let draw = svgjs.SVG().addTo('#drawing').viewbox(0, 0, 300, 140)
  let rect = draw.rect(100, 100).attr({fill: "#f06"})
  ....

但是我在运行时在 webpack:///node_modules/@svgdotjs/svg.js/src/elements/Dom.js

推荐阅读