SVG绘图-SVG.js_ 字节宝

前言

本文是在SVG.js 3.0的前提上，和2.x的API不一致。

官方文档：https://svgjs.dev/docs/3.0/getting-started/

这个库相比原生开发有以下几点优点：

API调用简单
组件定位方式统一，比如原生圆形设置的是中心点，而矩形就又是左上角，这样设置位置的时候还要判断是什么图形，分别计算设置。

引用

代码语言：javascript复制

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>

或者

代码语言：javascript复制

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

简单示例

代码语言：javascript复制

<!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()

代码语言：javascript复制

// 创建使用该方法
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)

各种图形

代码语言：javascript复制

<!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>

效果

容器

SVG.G

代码语言：javascript复制

var group = draw.group()
group.path('M10,20L30,40')

SVG.Symbol

Symbol相当于模板，模板中能够添加多个元素。

代码语言：javascript复制

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

基本用法

代码语言：javascript复制

var defs = draw.defs();
var r1 = defs.rect(100, 100).fill("#f09");
var use = draw.use(r1).move(110, 0);

对比

代码语言：javascript复制

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

代码语言：javascript复制

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

代码语言：javascript复制

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

代码语言：javascript复制

var link = draw.link('https://www.psvmc.cn')
var rect = link.rect(100, 100)

node.js svg api

0 人点赞