简介
elm-svg-cli 是一个能够使用 Elm 代码生成简单 SVG 图形的命令行工具。
使用 elm-svg-cli 可以快速的创建 SVG 图形，并且支持定制化的颜色和尺寸。
本文将详细介绍如何安装和使用 elm-svg-cli 工具。
安装
首先需要进行全局安装 elm-svg-cli 工具：
--- ------- -- -----------
使用
一般情况下，elm-svg-cli 需要两个参数来生成 SVG 图形：
- Elm 文件路径
- SVG 文件输出路径
下面将会用一个简单的 Elm 代码文件来生成 SVG 图形，该文件用于绘图一个矩形：
------ ---- -------- ------
------ --- -------- ----
------ -------------- -------- ----
---- -
---
- ----- ------ ------ ----- -
- ---- - - ----- - ----- ----- ------ ------ ----- ---- ------ - -- -其中该 Elm 文件会生成一个宽为 300，高度为 150，背景为 gray 的矩形。
接下来，执行下面的命令就可以生成 SVG 图片了：
----------- -------- --------
这个命令将会生成一个名为 main.svg 的 SVG 图片，该图片就是我们刚刚生成的矩形。
高级用法
elm-svg-cli 还支持一些高级用法，例如：
- 定制化参数 你可以在运行 elm-svg-cli 命令时传入一些参数，例如修改默认的颜色、尺寸等。
- 自定义模板 你可以更改 elm-svg-cli 默认的模板，从而生成自己需要的 SVG 图形。
下面，我们将详细介绍一下这两个高级用法。
定制化参数
以下是几个比较常用的参数：
--color修改矩形背景颜色--size修改矩形大小
例如，以下命令可以将矩形颜色修改为蓝色：
----------- -------- -------- ------------
以下命令可以将矩形大小修改为 400*200：
----------- -------- -------- --------------
自定义模板
如果你不满足 elm-svg-cli 的默认模板，你可以自定义自己的模板。
例如，以下就是一个自定义的 Elm 模板：
------ --------- -------- ------
------ --- -------- ----
------ -------------- -------- ----
--------- - - ----- ------ ----- -
---- -- -- - -- ----- ------ ------ ------- ---- ------ --
---- ----- ----- ----- -
--- - ----- --------- ------- ------ --------- ------ -
- --------- ---- ---- ----- ---- ----- -你可以通过下面的命令来对如上的 Elm 文件进行编译：
----------- ------------- ---------- -------------------------
这个命令将会编译 CustomSvg.elm 文件，并输出一个名为 custom.svg 的 SVG 图片。
总结
在本文中，我们学习了如何使用 elm-svg-cli 工具来生成 SVG 图形。
我们除了学习到了基本用法外，还了解了一些高级用法，例如自定义模板、定制化参数。
通过掌握这些工具，我们可以更加方便的创建自定义的 SVG 图形。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600671d430d0927023822a74