svg.js使用教程

这篇具有很好参考价值的文章主要介绍了svg.js使用教程。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在日常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容器

svg.js使用教程

1.2 指定容器存放位置

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

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

svg.js使用教程

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

到这里,页面显示如下:
svg.js使用教程

1.5 分组

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

svg.js使用教程

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)

svg.js使用教程

1.7 defs

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

var defs = draw.defs();

svg.js使用教程

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/') 给图形加上链接

svg.js使用教程

1.9 SVG.Dom

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

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

element变量数据如下:

svg.js使用教程

html代码如下:
svg.js使用教程

1.10 SVG.Rect 矩形

代码如下:

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

效果如下:
svg.js使用教程

1.11 SVG.Circle 圆

circle():

var circle = draw.circle(100)

最终html代码中,100是直径,可以看到半径是50,横向和纵向坐标是50;
svg.js使用教程

circle.radius():

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

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

svg.js使用教程

相比没有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);

svg.js使用教程

获取坐标信息:

line.array()

返回数据如下:

svg.js使用教程

修改线条:

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

svg.js使用教程

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' })

svg.js使用教程

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

svg.js使用教程

1.13.3 plain()

纯文本,过滤换行符

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

svg.js使用教程

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

svg.js使用教程

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.')

svg.js使用教程

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");	//获取字体线管属性值

svg.js使用教程

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' })

svg.js使用教程

1.13.7 textPath() 返回文本路径

text.textPath()

svg.js使用教程

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)

svg.js使用教程文章来源地址https://www.toymoban.com/news/detail-464569.html

1.14.1 修改图片路径

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

到了这里,关于svg.js使用教程的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 为什么kafka 需要 subscribe 的 group.id?我们是否需要使用 commitSync 手动提交偏移量?

    消费概念: Kafka 使用消费者组的概念来实现主题的并行消费 - 每条消息都将在每个消费者组中传递一次,无论该组中实际有多少个消费者。所以 group 参数是强制性的,如果没有组,Kafka 将不知道如何对待订阅同一主题的其他消费者。 偏移量 : 每当我们启动一个消费者时,

    2024年02月12日
    浏览(54)
  • 未来已来:AR如何改变我们的日常体验

    引言 在数字革命的浪潮中,一种技术正在逐渐改变着我们与数字世界互动的方式,这就是增强现实(AR)技术。AR不再只是科幻电影的幻想,它已经成为我们日常生活中的一部分,重新定义了我们与数字内容交互的方式。 AR,即增强现实,是一种技术,它将数字内容叠加到我

    2024年02月05日
    浏览(42)
  • ChatGPT会对我们日常生活带来什么影响?这些技术会改变我们学习阅读工作方式吗?

    AI 这个话题很火,我也一直在关注着,很多人甚至觉得 AI 会改变世界,也许你会好奇:ChatGPT 会在三年内终结编程吗?AI有可能改变人的学习方式吗?AI 能否取代打工人?本文会对相关问题从我们可见日常问题进行解答。 希望从:AI 辅助提高了人的阅读效率吗、AI能帮助人更

    2024年02月03日
    浏览(74)
  • 数据之美:如何用数据可视化优化我们的日常生活?

    在这个信息爆炸的时代,我们周围充斥着各种数据,而数据可视化正是一种强大的工具,帮助我们更好地理解和利用这些信息。那么,如何将数据可视化应用在我们的日常生活中呢?让我们一起探索这个引人入胜的话题。 首先,让我们简单了解一下数据可视化的概念。数据可

    2024年02月02日
    浏览(58)
  • 物联网行业的革命:Web3 技术如何改变我们的日常生活

    物联网 (IoT) 是一个充满创新和潜力的领域,它将物理设备、传感器和互联网连接起来,实现智能化和自动化。 在过去几年中,从智能家居、智能城市到工业自动化,物联网技术已经渗透到了各个领域。然而,随着物联网设备和系统的数量不断增加,如何确保这些设备和系统

    2024年02月13日
    浏览(54)
  • 数字之美:探秘数据可视化如何在我们的日常生活中展现魅力

    数据可视化是如何通过多种方式走进我们生活的呢?它不仅仅是冰冷的数字和图表,更是一门让信息跃然纸上的艺术。让我们一同探讨数据可视化如何以多种方式渗透进我们的日常生活,为我们呈现丰富而生动的信息画卷。下面我就以可视化从业者的角度来简单说说这个话题

    2024年02月02日
    浏览(43)
  • 元宇宙:未来我们的每一个日常行为是否都能成为赚钱工具?

    创造者经济、新兴的在线趋势和新的加密经济为创造者提供了更多的机会。各种平台、协议和数字市场都在争夺用户的注意和他们提供的创造力。这引领了高度的独立性,尤其是在年轻的数字原生代Z世代之间。加密经济正在塑造下一代创造者经济参与者的未来工作模式。 现

    2024年02月09日
    浏览(39)
  • Git 日常开发使用命令

    Git 生成密钥 cd ~/.ssh 新增密钥:ssh-keygen -t rsa -C \\\"你的邮箱\\\" 打开文件:cat id_rsa.pub 删除密钥:mkdir key_backupcp id_rsa* key_backup rm id_rsa*  Git 创建分支及删除分支 创建test分支:git branch test 切换到test分支:git checkout test 删除本地分支:git branch -d \\\"本地分支名\\\" 删除远程分支:git p

    2023年04月18日
    浏览(41)
  • 日常开发中代码技巧(个人使用)

    String,StringBuffer判断非空 String判断非空 参考:https://blog.csdn.net/Echo_width/article/details/79653704 首先,区分空串和null串 1 空串\\\"\\\"是长度为0的字符串,它有自己的串长度(0)和内容(空),判断一个字符串为空的方法: 2、 null串表示目前没有任何对象与该变量关联,检查一个字符

    2024年02月05日
    浏览(42)
  • Ant-Design 官方网站总是打不开,那么我们则需要使用以下该官网的镜像地址来打开;

      1、 Ant-Design 官网原地址: https://ant.design/index-cn Ant-Design 官网镜像地址:http://ant-design.gitee.io/index-cn 或者  Ant Design - 一套企业级 UI 设计语言和 React 组件库   2、 Ant-Design-Pro 原地址: https://pro.ant.design/index-cn Ant-Design-Pro 镜像地址:http://ant-design-pro.gitee.io/index-cn   3、

    2024年02月12日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包