如何从JS模块或SVG文件导入SVG代码适配mo.js？

一、优先方案：封装SVG为ES模块直接导出 #

直接把SVG代码用模板字符串包裹，作为ES模块导出，方便随时编辑修改：

// custom-shape.js
export const myCustomSvg = `
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- 这里写你的SVG内容，比如自定义图形 -->
  <path d="M50 10 L90 90 L10 90 Z" fill="#2ecc71"/>
</svg>
`;

导入使用步骤 #

1. HTML里的脚本标签必须加上type="module"，确保支持ES模块：

<script type="module" src="./app.js"></script>

2. 在业务代码中导入并传给mo.js：

// app.js
import { myCustomSvg } from './custom-shape.js';
import mojs from 'mo-js';

const customShape = new mojs.Shape({
  shape: myCustomSvg,
  x: 200,
  y: 200,
  duration: 1500,
  scale: {0:1}
});

customShape.play();

常见报错解决 #

• 跨域拦截：本地直接打开HTML会触发CORS，用npx serve启动本地服务器再访问。
• 语法报错：SVG里的引号和外层模板字符串冲突的话，用反引号包裹SVG（模板字符串）就不会有问题；如果用单引号，要把SVG内的单引号转义成\'。
• 路径错误：检查导入的相对路径是否和文件实际位置匹配，比如HTML在根目录，custom-shape.js在src文件夹，路径要写成./src/custom-shape.js。

二、修复svg-inline-loader返回Base64的问题 #

如果想用loader导入SVG文件，修改webpack配置，让svg-inline-loader优先处理SVG，避免被url-loader这类转Base64的loader拦截：

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: 'svg-inline-loader',
            options: {
              removeSVGTagAttrs: false // 保留SVG原有属性，mo.js需要完整标签结构
            }
          }
        ],
        exclude: /node_modules/
      },
      // 其他资源loader不要包含SVG
      {
        test: /\.(png|jpg|gif)$/,
        use: 'url-loader'
      }
    ]
  }
};

之后导入SVG就能拿到原始代码，直接传给mo.js的shape属性即可。

内容的提问来源于stack exchange，提问作者João Costa