SVG drawing - SVG.js

preface

On the premise of SVG.js 3.0, this article is inconsistent with the API of 2.x.

Official documents: https://svgjs.dev/docs/3.0/getting-started/

Compared with native development, this library has the following advantages:

  1. API calls are simple
  2. The positioning mode of components is unified. For example, the original circle is set as the center point, and the rectangle is the upper left corner. In this way, when setting the position, it is necessary to judge what graphics are and calculate the settings respectively.

quote

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

perhaps

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

Simple example

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

// Create using this method
var draw = SVG()
var draw = SVG().addTo('#drawing')

// This method can only get and cannot create
var rect = SVG('#myRectId')
// Not writing # is also obtained by ID
var rect = SVG('myRectId')

// any css selector will do
var path = SVG('#group1 path.myClass')

// Create drawing
var circle = SVG('<circle>')

// Convert dom to svgjs object
var obj = SVG(node)

Various graphics

<!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");

    // circular
    var c1 = draw
      .circle(60)
      .move(0, 0)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });

    // rectangle
    var r1 = draw
      .rect(100, 60)
      .move(0, 70)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });
    // rectangle
    var r2 = draw
      .rect(100, 60)
      .radius(10)
      .move(110, 70)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });
    // Oval rectangle on both sides
    var r3 = draw
      .rect(100, 60)
      .radius(30)
      .move(220, 70)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });
    // square
    var r4 = draw
      .rect(60, 60)
      .move(330, 70)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });

    // ellipse
    var e1 = draw
      .ellipse(100, 60)
      .move(0, 140)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });
    // diamond
    var polygon = draw
      .polygon("0,50 50,0 100,50 50,100")
      .move(0, 210)
      .fill("#ffe7f4")
      .stroke({ width: 1, color: "#f883c9" });

    // Hearts
    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" });

    // Line
    var line = draw
      .line(0, 0, 100, 60)
      .move(0, 410)
      .stroke({ width: 2, color: "#f06" });

    // picture
    var image = draw.image("./imgs/jian.jpg").size(100, 100).move(0, 480);

    // written words
    var text = draw
      .text("Coder said")
      .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>

effect

container

SVG.G

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

SVG.Symbol

Symbol is equivalent to a template. Multiple elements can be added to the template.

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

Basic Usage

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

contrast

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

We'll find out

The former is equivalent to the created template definition. If it is reused, the template itself will not be displayed. The latter is a copy of the existing element as a template, and both elements will be displayed.

Defs and Symbol

Similarities between defs and symbol

  • The defs element is used to predefine an element so that it can be reused in SVG images. The symbol element is used to define reusable symbols.
  • Graphics embedded in defs or symbol elements will not be displayed directly unless you use elements to reference it.

Differences between defs and symbol

  • xlink defines a standard set of methods for creating hyperlinks in XML documents, which can be used to reference elements or internally defined elements and groups.
  • A symbol element can have preservespectratio and viewBox attributes. The g element cannot have these attributes.

Therefore, using symbol element may be a better choice than using g in defs element to reuse graphics.

Defs is also equivalent to a definition. Unlike Symbol, the definition itself cannot be used directly. Only the defined elements can be used. To achieve the above effect, you need to wrap multiple elements with group s.

Comparison between the two with the same function:

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)

Posted on Sun, 05 Dec 2021 00:02:36 -0500 by BZero