SVG.js过滤器插件引入与使用问题求助（含CDN及包管理疑问）

问题背景 #

查阅svg.js的filter插件官方文档时，未获取到清晰的HTML页面引入说明，仅得到模糊且不完整的指引。尝试引入插件并编写代码后，浏览器控制台出现Uncaught SyntaxError: Cannot use import statement outside a module及rect.filter is not a function错误；更换引入链接后，又出现Cannot read properties of undefined (reading 'nodeName')及image.filterWith is not a function错误。

问题1：Npm和Yarn在该场景中的作用是什么？如何让代码正常运行？ #

Npm/Yarn的作用 #

• 作为包管理工具，负责快速安装、管理SVG.js主库与filter插件的依赖版本，确保二者版本兼容，避免CDN引入时版本不匹配引发的报错。
• 支持模块化开发，允许通过import语法直接引入插件，经Webpack、Vite等构建工具处理后可正常运行，不会出现模块语法错误。

代码正常运行的两种方案 #

1. 使用包管理工具（推荐）

   • 安装依赖：

     # 使用npm
     npm install @svgdotjs/svg.js @svgdotjs/svg.filter.js
     # 使用yarn
     yarn add @svgdotjs/svg.js @svgdotjs/svg.filter.js
     

   • 在项目中引入使用（纯HTML页面需将script标签设置为type="module"）：

     <script type="module">
       import { SVG } from '@svgdotjs/svg.js'
       import '@svgdotjs/svg.filter.js'
     
       const draw = SVG().addTo('body').size(300, 300)
       const rect = draw.rect(100, 100).fill('red')
       rect.filter(function(add) {
         add.blur(5)
       })
     </script>
     

2. CDN正确引入（无需构建工具）

   • 必须保证主库与插件的CDN版本匹配，且使用UMD格式链接（避免模块语法错误），引入顺序为先主库后插件：

     <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@latest/dist/svg.umd.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@latest/dist/svg.filter.umd.min.js"></script>
     <script>
       const draw = SVG().addTo('body').size(300, 300)
       const rect = draw.rect(100, 100).fill('red')
       rect.filter(function(add) {
         add.blur(5)
       })
     </script>
     

问题2：svg.filter.js的jsDelivr格式CDN链接是什么？ #

• 指定稳定版本链接（将x.x.x替换为具体版本号，例如3.0.0）：

  https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@x.x.x/dist/svg.filter.umd.min.js
  

• 最新版本链接：

  https://cdn.jsdelivr.net/npm/@svgdotjs/svg.filter.js@latest/dist/svg.filter.umd.min.js
  

注意：必须与SVG.js主库的CDN版本保持一致，否则会出现兼容性错误。

内容的提问来源于stack exchange，提问作者starrezzy