SVG绘图-SVG.js
前言
本文是在SVG.js 3.0的前提上，和2.x的API不一致。
官方文档：https://svgjs.dev/docs/3.0/getting-started/
这个库相比原生开发有以下几点优点：
- API调用简单
- 组件定位方式统一，比如原生圆形设置的是中心点，而矩形就又是左上角，这样设置位置的时候还要判断是什么图形，分别计算设置。
引用
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>或者
import { SVG } from '@svgdotjs/svg.js'简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVGJS</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>
<div id="drawing"></div>
</body>
<script type="text/javascript">
var draw = SVG().size("100%", "100%").addTo("#drawing");
draw.rect(100, 100).attr({ fill: "#f06" });
</script>
<style>
body {
margin: 0;
padding: 0;
}
#drawing {
width: 100vw;
height: 100vh;
}
</style>
</html>SVG()
// 创建使用该方法
var draw = SVG()
var draw = SVG().addTo('#drawing')
// 这个方法只能获取不能创建
var rect = SVG('#myRectId')
// 不写#也是按ID获取
var rect = SVG('myRectId')
// any css selector will do
var path = SVG('#group1 path.myClass')
// 创建图形
var circle = SVG('<circle>')
// 转换dom为svgjs对象
var obj = SVG(node)各种图形
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>SVGJS</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>
<div id="drawing"></div>
</body>
<script type="text/javascript">
var draw = SVG().size("100%", "100%").addTo("#drawing");
// 圆形
var c1 = draw
.circle(60)
.move(0, 0)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 矩形
var r1 = draw
.rect(100, 60)
.move(0, 70)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 矩形
var r2 = draw
.rect(100, 60)
.radius(10)
.move(110, 70)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 两侧椭圆矩形
var r3 = draw
.rect(100, 60)
.radius(30)
.move(220, 70)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 正方形
var r4 = draw
.rect(60, 60)
.move(330, 70)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 椭圆形
var e1 = draw
.ellipse(100, 60)
.move(0, 140)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 菱形
var polygon = draw
.polygon("0,50 50,0 100,50 50,100")
.move(0, 210)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 红心
var p1 = draw
.path(
"M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
)
.move(0, 320)
.fill("#ffe7f4")
.stroke({ width: 1, color: "#f883c9" });
// 线
var line = draw
.line(0, 0, 100, 60)
.move(0, 410)
.stroke({ width: 2, color: "#f06" });
// 图片
var image = draw.image("./imgs/jian.jpg").size(100, 100).move(0, 480);
// 文字
var text = draw
.text("码客说")
.font({
family: "Helvetica",
size: 34,
anchor: "middle",
leading: "1.5em"
})
.move(110, 513)
.fill("#ffffff")
.stroke({ width: 1, color: "#f883c9" });
</script>
<style>
body {
margin: 0;
padding: 10px;
background-color: #f3f3f3;
}
#drawing {
width: calc(100vw - 20px);
height: calc(100vh - 20px);
background-color: #ffffff;
}
</style>
</html>效果
image-20211203232258148
容器
SVG.G
var group = draw.group()
group.path('M10,20L30,40')SVG.Symbol
Symbol相当于模板，模板中能够添加多个元素。
var symbol = draw.symbol();
symbol.rect(100, 100).move(0, 0).fill("#f09");
symbol.circle(100).move(0, 110).fill("#f09");
var use = draw.use(symbol).move(110, 0);SVG.Defs
基本用法
var defs = draw.defs();
var r1 = defs.rect(100, 100).fill("#f09");
var use = draw.use(r1).move(110, 0);对比
var r1 = draw.rect(100, 100).fill("#f09");
var use = draw.use(r1).move(110, 0);我们会发现
前者相当于创建的模板定义，再使用，模板本身是不显示的。 后者是以现存的元素为模板复制了一份，两个元素都会显示。
Defs和Symbol
defs与symbol的相同点
defs元素用于预定义一个元素使其能够在SVG图像中重复使用。symbol元素用于定义可重复使用的符号。- 嵌入在
defs或symbol元素中的图形是不会被直接显示的，除非你使用元素来引用它。
defs与symbol的不同点
- xlink定义了一套标准的在 XML 文档中创建超级链接的方法，可以用它来引用元素或内定义的元素和组。
- 一个
symbol元素可以有preserveAspectRatio和viewBox属性。而g元素不能拥有这些属性。
因此相比于在defs元素中使用g的方式来复用图形，使用symbol元素也许是一个更好的选择。
Defs也相当于定义，不同与Symbol，定义本身不能直接use，定义下的元素才能使用，要实现上面的效果还要用group把多个元素包起来。
同样功能两者实现对比：
Symbol
var symbol = draw.symbol();
symbol.rect(100, 100).move(0, 0).fill("#f09");
symbol.circle(100).move(0, 110).fill("#f09");
var use = draw.use(symbol).move(110, 0);Defs
var defs = draw.defs();
var group = defs.group();
group.rect(100, 100).move(0, 0).fill("#f09");
group.circle(100).move(0, 110).fill("#f09");
var use = draw.use(group).move(110, 0).size(100, 100);SVG.A
var link = draw.link('https://www.psvmc.cn')
var rect = link.rect(100, 100)本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-12-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读