开源项目 elm/svg
使用教程
svgFast SVG in Elm项目地址:https://gitcode.com/gh_mirrors/svg4/svg
1. 项目的目录结构及介绍
elm/svg/
├── README.md
├── elm.json
├── examples/
│ ├── Basics.elm
│ ├── Shapes.elm
│ ├── Attributes.elm
│ └── ...
├── src/
│ ├── Svg.elm
│ ├── Svg/
│ │ ├── Attributes.elm
│ │ ├── Events.elm
│ │ ├── Filter.elm
│ │ └── ...
│ └── ...
└── tests/
├── Main.elm
└── ...
- README.md: 项目介绍和使用说明。
- elm.json: 项目的依赖和配置文件。
- examples/: 包含多个示例文件,展示如何使用
elm/svg
库。 - src/: 包含
elm/svg
库的核心代码,分为多个模块。 - tests/: 包含测试文件,用于确保库的正确性。
2. 项目的启动文件介绍
项目的启动文件通常是 examples/Basics.elm
,它展示了如何使用 elm/svg
库来创建基本的 SVG 图形。
module Basics exposing (main)
import Html exposing (Html)
import Svg exposing (svg, circle, rect)
import Svg.Attributes exposing (width, height, cx, cy, r, fill, stroke, strokeWidth)
main : Html msg
main =
svg [ width "100", height "100" ]
[ circle [ cx "50", cy "50", r "40", stroke "green", strokeWidth "4", fill "yellow" ] []
, rect [ width "100", height "100", fill "blue" ] []
]
3. 项目的配置文件介绍
项目的配置文件是 elm.json
,它定义了项目的依赖和其他配置信息。
{
"type": "package",
"name": "elm/svg",
"summary": "Fast rendering of SVG graphics",
"license": "BSD-3-Clause",
"version": "1.0.0",
"exposed-modules": [
"Svg",
"Svg.Attributes",
"Svg.Events",
"Svg.Filter"
],
"elm-version": "0.19.0 <= v < 0.20.0",
"dependencies": {
"elm/core": "1.0.0 <= v < 2.0.0",
"elm/html": "1.0.0 <= v < 2.0.0"
},
"test-dependencies": {}
}
- type: 指定项目类型为
package
。 - name: 项目名称。
- summary: 项目简介。
- license: 项目许可证。
- version: 项目版本。
- exposed-modules: 暴露的模块。
- elm-version: 支持的 Elm 版本。
- dependencies: 项目依赖的其他包。
- test-dependencies: 测试依赖的其他包。
以上是 elm/svg
开源项目的使用教程,希望对你有所帮助。
svgFast SVG in Elm项目地址:https://gitcode.com/gh_mirrors/svg4/svg