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:
- API calls are simple
- 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)