如何动态导入、修改和导出矢量文件?
How can you dynamically import, modify, and export vector files?
我希望能够从文件系统导入 SVG 文件,对它们进行分层,更改它们的填充颜色,然后将它们导出为单个矢量文件。
最好的参考来源是他们的官方文档: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 配对,使其更符合我的编码风格和应用程序的要求。
这个问题的解决方案是将 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);
}
我希望能够从文件系统导入 SVG 文件,对它们进行分层,更改它们的填充颜色,然后将它们导出为单个矢量文件。
最好的参考来源是他们的官方文档: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 配对,使其更符合我的编码风格和应用程序的要求。
这个问题的解决方案是将 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);
}