如何动态导入、修改和导出矢量文件？

Question

我希望能够从文件系统导入 SVG 文件，对它们进行分层，更改它们的填充颜色，然后将它们导出为单个矢量文件。

Answer 1

最好的参考来源是他们的官方文档：https://svgjs.dev/docs/3.0/getting-started/

源代码行中的下一个是堆栈溢出的 svg.js 标签搜索：https://whosebug.com/questions/tagged/svg.js

现在从我这边快速介绍一下。

SVG.JS 让您可以更广泛地使用 SVG。您可以将 SVG 导入您的代码并开始操作它。您可以更改颜色、大小，甚至可以添加事件和动画。

然而，在开始使用 SVG 之前，您应该确保使用像这样的在线工具压缩 SVG：https://jakearchibald.github.io/svgomg/ 并且在压缩之后，您应该通过添加 class 来编辑您的 SVG 文件select SVG 中的路径（区域），以便您可以 select 来自 JS 代码的这些路径。来自我使用此技术的项目之一的 SVG 示例（为简单起见进行了修剪）：

<svg id="svg-map" class="svg-map" version="1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 363 624">
  <path class="svg-path-1" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
  <path class="svg-path-2" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
  <path class="svg-path-3" fill="#FFFFFF" stroke="#FFFFFF" stroke-miterlimit="10" d="M114 ... 24 42z"/>
</svg>

您可以将 SVG 保存在某个文件夹中，然后使用 HTML 页面上的图像标签进行渲染。

在您的项目中安装（使用 NodeJS 的示例）：

npm install svg.js

然后像这样将这个库导入到你的 JS 代码中：

import { SVG } from '@svgdotjs/svg.js'

现在您可以使用如下代码 select 来自您页面的 SVG：

let mapContainer = SVG.select('.some-svg-class');
let myMapObject = mapContainer.first();

并设置视口：

myMapObject.viewbox(0, 0, 500, 700);

现在您可以遍历地图的所有路径（区域）并执行如下操作：

let svgRegionPaths = myMapObject.select('path');
svgRegionPaths.each(function(i, children) {
  this.opacity(0.7);
});

这只是一个例子。您可以使用这个库做更多的事情。我没有通过 class select 显示 selecting 路径的例子，但我希望你明白了。

我能够将其与 React 配对，使其更符合我的编码风格和应用程序的要求。

Answer 2

这个问题的解决方案是将 SVG 数据作为字符串导入，换出各种属性的常量，然后将新字符串写入文件系统。

例如，以下 svg 显示橙色圆圈：

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="500" r="500" fill="orange"/>
</svg>

如果您希望能够动态更改圆圈的颜色，只需将“橙色”文本替换为占位符名称，例如“{FILL_COLOR}”。现在，SVG 应如下所示：

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
  <circle cx="500" cy="500" r="500" fill="{FILL_COLOR}"/>
</svg>

在您的代码中，您可以将文件系统中的文件作为字符串加载，然后根据需要对其进行更改；然后您可以将结果写入文件系统。该解决方案也适用于前端。无需从文件系统加载 SVG，只需将其作为硬编码常量即可。对 SVG 进行更改后，您可以根据需要使用结果。

function getCircle(color) {
  const svg = `<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><circle cx="500" cy="500" r="500" fill="{FILL_COLOR}"/></svg>`;
  return svg.replace('{FILL_COLOR}', color);
}

如何动态导入、修改和导出矢量文件？

How can you dynamically import, modify, and export vector files?

javascript

node.js

image-processing

vector-graphics