svg.js使用教程

news2024/12/28 5:10:06

在日常web开发过程中,我们会需要显示一些图形化的元素,使用div+css、ps图片是常见的实现方式。

但使用svg来绘制可能更加合适,SVG是可缩放矢量图形,有一些预定义的形状元素,可被开发者使用和操作: 矩形(rect)、 圆形(circle)、 椭圆(ellipse)、 线(line)、 折线(polyline)、 多边形(polygon)、 路径(path)。

svg可以是独立的*.svg文件,可以通过 embed标签、object标签、iframe标签 来引入。也可以直接将svg代码写入html中,开发和使用起来非常灵活。

本教程主要介绍svg.js,这是用于操作和动画 SVG 的轻量级库。官网自荐的理由有:

  • SVG.js 没有依赖性,旨在尽可能小,同时提供几乎完整的 SVG 规范覆盖。
  • 代码易于阅读,语法整洁。
  • 完美支持动画
  • 大小、位置、变换、颜色等动画
  • 得益于模块化结构,无痛扩展
  • 各种有用的插件可用
  • 具有move、size、center、 …的形状类型之间的统一 api
  • 将事件绑定到元素
  • 完全支持不透明蒙版和剪切路径
  • 文本路径,甚至动画
  • 元素群
  • 动态渐变和图案

安装:

npm install @svgdotjs/svg.js

一、绘制

1.1 创建svg容器

import { SVG } from '@svgdotjs/svg.js'
var draw = SVG();	//返回Svg容器

在这里插入图片描述

1.2 指定容器存放位置

可以是css选择器,也可以是dom节点;

draw.addTo(main.value).size("100%", "100%");
// draw.addTo(".main").size("100%", "100%");   效果一样
// draw.addTo("#main").size("100%", "100%");   效果一样

在这里插入图片描述

1.3 矩形

draw.rect(100, 100).attr({ fill: '#f06' })	//返回rect

1.4 嵌套矩形

let nested = draw.nested();		//返回svg
nested.rect(100, 100).move(100, 100);	//返回rect

到这里,页面显示如下:
在这里插入图片描述

1.5 分组

let group = draw.group();
group.path('M10,20L30,40')
group.add(rect1);		//分组中插入矩形
group.add(rect2, 0);	//分组中插入矩形,并指定位置索引在0,就是第一个;

在这里插入图片描述

1.6 标记

标记元素与组元素不同,符号元素是容器元素。 符号和组之间的唯一区别是没有html标签。

下面代码和上面group元素类似,显示也一样,但是看html代码可以看到,没有sumbol标签。

var symbol = draw.symbol()
symbol.path('M10,20L30,40')
symbol.add(rect1);
symbol.add(rect2, 0);
var use = draw.use(symbol)

在这里插入图片描述

1.7 defs

元素是引用元素的容器。 节点的后代未直接渲染。 节点属于主 文档中,可以使用 def()方法访问。

var defs = draw.defs();

在这里插入图片描述

1.8 链接

var link = draw.link('http://svgdotjs.github.io/')
link.target('_blank')
var textLink = link.text("百度").size(100, 20).fill("#0f0").move(200, 0);
var rectLink = link.rect(100, 20).fill("#0f0").move(200, 20);

//link.to('http://svgdotjs.github.io/').target('_blank')  修改链接地址和target
//rect1.linkTo('http://svgdotjs.github.io/') 给图形加上链接

在这里插入图片描述

1.9 SVG.Dom

使用element()element.words()可以用来创建dom节点。

var element = draw.element('title').words('This is a title.');

element变量数据如下:

html代码如下:
在这里插入图片描述

1.10 SVG.Rect 矩形

代码如下:

var rect = draw.rect(100, 100).radius(10, 20)

效果如下:
在这里插入图片描述

1.11 SVG.Circle 圆

circle():

var circle = draw.circle(100)

最终html代码中,100是直径,可以看到半径是50,横向和纵向坐标是50;
在这里插入图片描述

circle.radius():

radius中设置的半径比circle中的优先级更高;

var circle = draw.circle(100).radius(100);

在这里插入图片描述

相比没有radius的代码,radius(100)修改了半径r;

1.12 SVG.Line 线条

var line = draw.line(0, 50, 50, 100)
	.stroke({ width: 10, color: '#f06', linecap: 'round' })
	.move(0, 0);

在这里插入图片描述

获取坐标信息:

line.array()

返回数据如下:

在这里插入图片描述

修改线条:

line.plot('0,0 100,150')
// line.plot([[0, 0], [100, 150]]) 效果一致
// line.plot(new SVG.PointArray([[0, 0], [100, 150]])) 效果一致

在这里插入图片描述

1.13 文本

1.13.1 text()

支持换行

var text1 = draw.text('Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.');
text.move(20, 20).font({ fill: '#f06', family: 'Inconsolata' })

在这里插入图片描述

1.13.2 tspan()

手动创建换行

var text2 = draw.text(function (add) {
    add.tspan('Lorem ipsum dolor sit amet ').newLine()
    add.tspan('consectetur').fill('#f06')
    add.tspan('.')
    add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
    add.tspan('Nunc ultrices lectus at erat').newLine()
    add.tspan('dictum pharetra elementum ante').newLine()
})

在这里插入图片描述

1.13.3 plain()

纯文本,过滤换行符

var text3 = draw.plain('Lorem ipsum dolor sit amet consectetur.\nCras sodales imperdiet auctor.')

在这里插入图片描述

1.13.4 build() 构建模式

A 开启构建模式

在这种模式下,text中内容会被

var text = draw.text('This is just the start, ').move(0, 0).font({ fill: '#f06', family: 'Inconsolata' })
text.build(true)  // enables build mode
var tspan = text.tspan('something pink in the middle ').fill('#00ff97')
text.plain('and again boring at the end.')
text.build(false) // disables build mode

在这里插入图片描述

B 未开启构建模式

在这种模式下,text中的内容永远会被替换处理;

var text = draw.text('This is just the start, ').move(0, 0).font({ fill: '#f06', family: 'Inconsolata' })
var tspan = text.tspan('something pink in the middle ').fill('#00ff97')
text.plain('and again boring at the end.')

在这里插入图片描述

1.13.5 常用方法

text.clear() //清除被调用文本元素的所有内容:
text.length() //获取所有 tspan 的总计算文本长度:
text.font({
  family:   'Helvetica'
, size:     144
, anchor:   'middle'
, leading:  '1.5em'
})	//设置方法
text.leading(1.3)	//设置leading
text.length();	//获取方法的整体长度
text.font("leading");	//获取字体线管属性值

在这里插入图片描述

1.13.6 path() 设置文本路径

var text = draw.text(function (add) {
    add.tspan('We go ')
    add.tspan('up').fill('#f09').dy(0)
    add.tspan(', then we go down, then up again').dy(40)
})

var path = 'M 100 200 C 200 100 300 0 400 100 C 500 200 600 300 700 200 C 800 100 900 100 900 100'

var textpath = text.path(path).font({ size: 22.5, family: 'Verdana' })

在这里插入图片描述

1.13.7 textPath() 返回文本路径

text.textPath()

在这里插入图片描述

1.13.8 修改/获取文本

text.text('Brilliant!')
//text.text() 获取文本

1.14 图片

var image = draw.image('https://cdn.img42.com/4b6f5e63ac50c95fe147052d8a4db676.jpeg')
image.size(100, 100).move(20, 20)

在这里插入图片描述

1.14.1 修改图片路径

image.load('/path/to/another/image.jpg', callback)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/341760.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图解LeetCode——剑指 Offer 50. 第一个只出现一次的字符

一、题目 在字符串 s 中找出第一个只出现一次的字符。如果没有&#xff0c;返回一个单空格。 s 只包含小写字母。 二、示例 2.1> 示例 1: 【输入】s "abaccdeff" 【输出】b 2.2> 示例 2: 【输入】s "" 【输出】 限制&#xff1a; 0 < s 的…

Swift(5)

目录 集合类型 数组 ​编辑 合集 合集操作 字典 Where 集合类型 Swift提供了三种主要的集合类型&#xff1a;组合&#xff0c;合集&#xff0c;字典。 数组是有序的值的集合。 合集是唯一值的无序集合。 字典是无序的键值对集合。 数组 Swift数组的类型的完整写法是…

总结如何设计一款营销低代码可视化海报平台

背景 我所在的部门负责的是活动业务&#xff0c;每天都有很多的营销活动&#xff0c;随之而来的就是大量的H5活动页面。而这些H5活动已经沉淀出了比较固定的玩法交互&#xff0c;我们开发大多数的工作也只是在复制粘贴这种大量的重复工作。 在基于此背景下我开始了低代码平台…

【手写 Vuex 源码】第十篇 - Vuex 命名空间的实现

一&#xff0c;前言 上一篇&#xff0c;主要介绍了 Vuex 响应式数据和缓存的实现&#xff0c;主要涉及以下几个点&#xff1a; Vuex 的响应式实现原理&#xff1b;响应式核心方法 resetStoreVM&#xff1b;commit 和 dispatch 的处理&#xff1b; 本篇&#xff0c;继续介绍 …

jdk-concurrentHashMap(1.8)源码学习

上文&#xff1a;jdk-HashMap(1.8)源码学习concurrentHashMap介绍concurrentHashMap是一个高性能、线程安全的HashMap&#xff0c;底层数据结构主要还是以数组链表红黑树实现与HashMap的结构是一致的。concurrentHashMap1.7和1.8的区别&#xff1f;对比名称1.71.8备注线程安全是…

PhysioNet2017分类的代码实现

PhysioNet2017数据集介绍可参考文章&#xff1a;https://wendy.blog.csdn.net/article/details/128686196。本文主要介绍利用PhysioNet2017数据集对其进行分类的代码实现。 目录一、数据集预处理二、训练2.1 导入数据集并进行数据裁剪2.2 划分训练集、验证集和测试集2.3 设置训…

C语言(C语言结构基础使用)

目录 一.结构 1.结构声明 2.初始化结构 3.访问结构成员 4.结构的初始化器 5.定义无结构标记 6.结构数组 7.嵌套结构 8.复合字面量和结构&#xff08;C99&#xff09; 9.伸缩性数组成员 10.伸缩性数组得特殊处理请求 11.匿名结构&#xff08;C11&#xff09; 12.使用结构数组得函…

RiProRiProV2主题美化顶部增加一行导航header导航通知

背景: 有些网站的背景顶部有一行罪行公告,样式不错,希望自己的网站也借鉴过来,本教程将指导如何操作,并调整成自己想要的样式。 比如网友搭的666资源站 xd素材中文网

【C语言必经之路——第11节】初阶指针(2)

五、指针的运算1、指针与整数相加减看一下下面的代码&#xff1a;#include<stdio.h> int my_strlen(char* str) {int count0;while(*str!\0){count;str;//指针加减整数}return count; } int main() {int lenmy_strlen("abcdef");printf("%d\n",len);…

OpenCV实战(10)——积分图像详解

OpenCV实战&#xff08;10&#xff09;——积分图像详解0. 前言1. 积分图像计算2. 自适应阈值2.1 固定阈值的缺陷2.2 使用自适应阈值2.3 其它自适应阈值计算方法2.4 完整代码3. 使用直方图进行视觉跟踪3.1 查找目标对象3.2 完整代码小结系列链接0. 前言 我们知道直方图是通过遍…

方法递归调用

&#x1f3e1;个人主页 &#xff1a; 守夜人st &#x1f680;系列专栏&#xff1a;Java …持续更新中敬请关注… &#x1f649;博主简介&#xff1a;软件工程专业&#xff0c;在校学生&#xff0c;写博客是为了总结回顾一些所学知识点 ✈️推荐一款模拟面试&#xff0c;刷题神器…

【C++设计模式】学习笔记(4):观察者模式 Observer

目录 简介动机(Motivation)模式定义结构(Structure)要点总结笔记结语简介 Hello! 非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~ ଘ(੭ˊᵕˋ)੭ 昵称:海轰 标签:程序猿|C++选手|学生 简介:因C语言结识编程,随后转入计算机专业,获得过国家奖学金…

渣土车智能识别检测 yolov5

渣土车智能识别检测通过yolov5网络模型深度学习技术&#xff0c;渣土车智能识别检测对禁止渣土车通行现场画面中含有渣土车时进行自动识别监测&#xff0c;并自动抓拍告警。YOLOv5是一种单阶段目标检测算法&#xff0c;该算法在YOLOv4的基础上添加了一些新的改进思路&#xff0…

【Redis场景3】缓存穿透、击穿问题

场景问题及原因 缓存穿透&#xff1a; 原因&#xff1a;客户端请求的数据在缓存和数据库中不存在&#xff0c;这样缓存永远不会生效&#xff0c;请求全部打入数据库&#xff0c;造成数据库连接异常。 解决思路&#xff1a; 缓存空对象 对于不存在的数据也在Redis建立缓存&a…

spark01-内存数据分区数量个数原理

原始代码如下&#xff1a;val conf: SparkConf new SparkConf().setMaster("local[*]").setAppName("wordcount")val scnew SparkContext(conf)val rdd: RDD[Int] sc.makeRDD(List(1,2,3,4)//将处理的数据保存分区文件rdd.saveAsTextFile("output2&…

分布式数据库(ShardingSphere)

单库单表数据量过大导致的问题与应对传统的将数据集中存储至单一数据节点的解决方案&#xff0c;在容量、性能、可用性和运维成本这三方面已经难于满足互联网的海量数据场景。我们在单库单表数据量超过一定容量水位的情况下&#xff0c;索引树层级增加&#xff0c;磁盘 IO 也很…

数据库(六): MySQL的主从复制和读写分离

文章目录一、为什么要使用主从复制和读写分离二、主从复制的原理三、如何实现主从复制3.1 master配置3.2 slave配置3.3 测试主从复制四、读写分离五、缺点一、为什么要使用主从复制和读写分离 注意到主从复制和读写分离一般是一起使用的。目的很简单&#xff0c;就是提高数据库…

Python:路径之谜(DFS剪枝)

题目描述 小张冒充 X 星球的骑士&#xff0c;进入了一个奇怪的城堡。 城堡里边什么都没有&#xff0c;只有方形石头铺成的地面。 假设城堡地面是 nn 个方格。如下图所示。 按习俗&#xff0c;骑士要从西北角走到东南角。可以横向或纵向移动&#xff0c;但不能斜着走&#xf…

Java类和对象超详细整理,适合新手入门

目录 一、驼峰命名法 二、Java注释 三、转义符 四、Java程序它的基本结构是什么&#xff1f; 五、Java中的类 六、创建类 七、定义main方法 八、执行代码输出语句 九、Java中的对象 十、创建对象 十一、类与对象的关系 一、驼峰命名法 包名&#xff1a;多单词组成所…

常用类详解(二)StringBuffer

StringBuffer类&#xff1a; 基本介绍&#xff1a; java.lang.StringBuffer代表可变的字符序列&#xff0c;可以对字符串内容进行增删 很多方法与String相同&#xff0c;但StringBuffer是可变长度的。 StringBuffer是一个容器。 我们进行查看StringBuffer&#xff0c;如下…