html字符串转svg,【SVG】如何操作SVG Text

上周我们学习了如何使用元素创建SVG文本。在实例中我们设置了x和y坐标来定位文本,也尝试了给SVG文本中的每个字符定位。关于元素还有很多内容。

8195bee49cb5d29f5dc9d7452cd7ac90.png

在处理SVG文本时,不要局限于x和y属性。元素还有几个可以添加的属性,现在我们开始讨论吧。

dx和dy属性

我们从dx和dy属性开始讲,和x和y类似,除了它们的值表示的是相对于前一个字符的长度,而不是相对于整个视窗的绝对定位。

和x、y一样,dx和dy接受一列长度值。

我们还是用上周的示例,然后把值赋给dx和dy。

This is some SVG Text

这里我把x和y的值都设置为0,然后dx和dy设置一列长度值。注意到随着长度值的增长,下一个字符的距离也在增长。如果想要在字符间保持相同的间距,你需要给dx和dy设置相同的值。

This is some SVG Text

一件你可能没注意到的事是上面列表中字符之间的长度和间距,好像有点不太对。如果你测量了每个字符的长度,你期望中的i和s之间的间距应该是60px,这是最后一个值设置的。

但是它没有这样显示的原因是,60px拉开的是从“is”中的i到“this”和“is”之间的space[空格]之间的间距。间隔是按照字符(空格也是字符)来算的。

旋转SVG字符

你还可以使用rotate属性来旋转字符,它接受一列值。每个数字又代表一个特定的字符。

This is some SVG Text

这里我把x设置为0,y为20,给rotate属性设置了一列值。字符T旋转0deg,H旋转45deg,以此类推。直到这列值结束,所有剩下的字符都会保持旋转0deg。

This is some SVG Text

和前面的实例一样,空格也会被旋转。this和is之间的空格被旋转了180deg,这就是为什么我在rotate这一列值的最后添加了一个0。否则,剩余的字符也都会被旋转180deg,变成颠倒的。

被旋转的是单个字符,而不是整个文本字符串。要旋转整个字符串你需要使用transform。

textLength属性

下一个属性是textLength,接受一个长度值。

textLength属性允许你设置文本的长度为一个指定值,忽略容器的尺寸。

This is some SVG Text

这里我把textLength设置为和视窗相同的宽度,这样文本会从两端拉伸。注意最后一个字符不会碰到右边缘。因为它还是在EM box中。EM box的右边缘碰到了视窗的右边缘。

注意:评论中提到,最后一个字符在Firefox和Edge中碰触到右边缘。我猜测这是和每个浏览器如何计算字符之间的间距有关,但是我也不确定。如果有同学知道的话,欢迎评论区分享。

This is some SVG Text

字符被自动分隔开,所以文本字符串填充了空间。就像证明内容一样,除非可以设置宽度。

如果你有兴趣,还可以通过设置一个较小的长度值,把字符都叠一起。

This is some SVG Text

This is some SVG Text

通常这不会用来展示大家要阅读的文本,但是它可以用于创建一些有趣的效果,在文本不需要被阅读的情况下。

有一件你需要注意的事情是,字符之间的空间是根据textLength调整的,但是字符本身保留相同的尺寸(不会变形)。你可以通过针对textElement的属性来改变。

lengthAdjust属性

lengthAdjust属性接受两个值(spacing和spacingAndGlyphs),决定文本是否会被拉伸或压缩。

对于这两个值,spacing是默认值,这就是为什么前面的实例中,字符之间的空格自动调整为需要的长度。还是用前面的实例,只改变lengthAdjust的值。

This is some SVG Text

字符得到拉伸,填满其整空间

This is some SVG Text

我前面提到了,因为SVG文本是和其他图形元素一样的渲染方式,所以我们可以给它添加描边和填充、图案、渐变。任何你可以给其它SVG元素添加的属性,都可以应用给SVG文本。

如下,这个实例中我把填充改成了蓝色,添加一个红色的描边,并把stroke-width设置为2。

SVG

SVG

和上一篇文章一起,我展示了几个操作文本的方式,还有几个文本相关的元素待学习。今天先到这里。

总结

我希望你觉得SVG文本不难学习,在元素中创建的元素,将其渲染为可搜索和选中的文本,so easy。

通过元素的属性,我们还可以操作SVG文本。

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

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

相关文章

C++ 面试考点(三)

点击蓝字关注我们21、构造函数和析构函数可以调用虚函数吗,为什么在C中,提倡不在构造函数和析构函数中调用虚函数;在构造函数和析构函数调用的所有函数(包括虚函数)都是编译时确定的, 虚函数将运行该类中的版本.因为父类对象会在子类之前进行…

用终端访问路由器设置端口开发_serial for mac(终端管理软件)v2.0.3

原标题:serial for mac(终端管理软件)v2.0.3serial for mac是应用在Mac上的一款终端管理软件,可以帮助您连接和控制串行设备,如服务器,路由器或调制解调器等网络设备,PBX系统等。好消息是Serial为大多数串行设备提供了…

大神级的C++性能优化,你能看懂吗?

点击蓝字关注我们一、前言性能优化不管是从方法论还是从实践上都有很多东西,文章会从C语言本身入手,介绍一些性能优化的方法,希望能做到简洁实用。二、实例1在开始本文的内容之前,让我们看段小程序:// 获取一个整数对应…

钢笔墨水能否代替打印机墨水_LAMY钢笔应该如何选择墨水?

其实墨水世面上基本是有两种:碳素墨水和非碳素。碳素墨水相对比较堵笔,碳素墨水对钢笔本身腐蚀性不大,腐蚀性大的那是染料/颜料墨水。碳素墨水写字非常容易有笔锋,而非碳素墨水就显得略微柔和了。有人说,字写得好的人用…

html ctf查找,Web CTF 解题思路总结—南京邮电大学攻防平台writeup

1、直接查看源代码例:签到题(50)2、PHP的特性(1)MD5 碰撞例:md5 collision(50)md5碰撞:MD5摘要算法可以从多个字节组成的串中计算出由32个字节构成的“特征串”,对于超过32字节的串来说,MD5计算得出的值必然是其一个子…

java 1.8新增功能_睡觉时:新增的Java 8新增功能

java 1.8新增功能自Java 8推出以来,最有趣的功能是什么? Java 8最近庆祝了它的第一个生日,其主要版本已经在一年多以前了。 这当然值得庆祝。 自从最初的Java 8版本问世以来,已经发布了六个更新。 这些更新中的某些元素是次要的…

C++ 为什么不加入垃圾回收机制

点击蓝字关注我们Java的爱好者们经常批评C中没有提供与Java类似的垃圾回收(Gabage Collector)机制(这很正常,正如C的爱好者有时也攻击Java没有这个没有那个,或者这个不行那个不够好),导致C中对动态存储的官吏称为程序员的噩梦,不是…

c++ 共享内存_Python3.8多进程之共享内存

最近发了个宏愿想写一个做企业金融研究的Python框架。拖出Python一看已经更新到了3.8,于是就发现了Python 3.8里新出现的模块:multiprocessing.shared_memory。随手写了个测试。生成一个240MB大小的pandas.DataFrame,然后转换成numpy.recarra…

计算机主机箱外部介绍图,电脑的主机结构是怎样的 电脑主机结构图【图文】...

在电脑已经普及的今天,基本上每家每户都有电脑了,大家用它来看电影,搜索资料啊,上网啊等等。在我们日常的娱乐方式中,电脑也是我们的娱乐项目之一,至少还是好多人用它看电影和追剧的。但是机器会有故障的时…

C 语言各数据类型的内存映像

点击蓝字关注我们C语言各种数据类型的内存映像&#xff08;32位平台&#xff09;&#xff1a;0 signed char#include <stdio.h> int main() {char min 1<<7;char max (1<<7)-1;for(int imin;i<max;i)if(i<0)printf("%.2X ",(unsigned char…

用java编写一个图书管理系统_手把手教你编写第一个java程序

安装完jdk后我们就可以试着编写第一个java程序了&#xff0c;让我们一起来试试吧&#xff01;第一步点击开始——所有程序——附件——记事本&#xff0c;新建记事本&#xff0c;输入以下代码&#xff1a;class HelloWorld { public static void main(String args[]) { System.…

go micro java_Java Micro Framework:您无法忽略的新趋势

go micro java什么是Java微框架&#xff0c;为什么要使用它们&#xff1f; 每种语言都有权衡。 对于Java&#xff0c;要成为一种安全&#xff0c;经过严格测试&#xff0c;向后兼容的语言&#xff0c;就要在敏捷性和简化方面做出一些牺牲。 无可否认&#xff0c;有些冗长和冗长…

C语言调用C++类成员函数讲解和实例

点击蓝字关注我们1、问题成因C语言与C调用问题原因主要在于C编译器和C编译器的不同。C是过程式语言&#xff0c;C编译器编译后&#xff0c;函数在符号库中就是函数名&#xff0c;没有其他任何附加信息。而C是对象式语言&#xff0c;支持函数重载&#xff0c;C编译器编译后&…

学生命科学要学计算机吗,现在学生物学出路真的有那么不济吗?

最近浏览知乎&#xff0c;看到大规模的生物劝退贴&#xff0c;这些帖子纷纷拿出多个例子&#xff0c;并现身说法&#xff0c;告诫学生物的同学尽早转行&#xff0c;并声称劝退一人胜发7篇CNS。作为网友盛传的天坑之首&#xff0c;生物专业到底有多坑&#xff1f;环球科学曾对北…

java笔试题_Java面试才到笔试就没有然后了?快来签收,高频笔试57题及解答

前言很多人面试之前&#xff0c;可能没有在互联网公司工作过或者说工作过但年头较短&#xff0c;不知道互联网公司技术面试都会问哪些问题&#xff1f; 再加上可能自己准备也不充分&#xff0c;去面试没几个回合就被面试官几个问题打蒙了&#xff0c;甚至笔试都过不了。最后以惨…

java开发错误_每个Java开发人员都必须避免的9个安全错误

java开发错误Checkmarx CxSAST是功能强大的源代码分析&#xff08;SCA&#xff09;解决方案&#xff0c;旨在从根本上识别&#xff0c;跟踪和修复技术和逻辑安全漏洞&#xff1a;源代码。 在这里查看 &#xff01; 自从1995年中期引入Java以来​​&#xff0c;它已经走了很长一…

C语言中常用的标准库函数有哪些?

点击蓝字关注我们标准头文件包括&#xff1a;<asset.h> <ctype.h> <errno.h> <float.h> <limits.h> <locale.h> <math.h> <setjmp.h> <signal.h> <stdarg.h> <…

计算机考试一级考试基础知识,全国计算机等级考试一级msoffice基础知识

全国计算机等级考试一级msoffice基础知识导语&#xff1a;在日常生活中&#xff0c;媒体(Medium &#xff0c;复数形式为Media )是指文字、声音、图像、动画和视频等内容。多媒体(Multimedia )是指能够同时对两种或两种以上媒体进行采集、操作、编辑、存储等综合处理的技术。多…

2008铁路旅客列车时刻表_天津到新沂汽车卧铺大巴车长途汽车发车时刻表

长途大巴网上需要注意什么&#xff01;选择乘坐大巴&#xff0c;是大家出行时的一个好选择&#xff0c;而且长途大巴网上也 很方便&#xff0c;能让大家节省不少的时间&#xff0c;但是网上有许多的要求&#xff0c;可能大家还不清楚。小编就给大家 介绍下长途大巴网上须知。长…

web ua检测_UA Web挑战会议:针对初创公司的SpringIO

web ua检测在本周&#xff0c;我在“后端”部分的UA Web挑战会议上发表了讲话。 我在演讲中选择了一个奇怪的话题-“面向初创企业的SpringIO”。 结果是什么&#xff1f; 我将在下面总结。 在过去三年中&#xff0c;我开发了各种个人Web项目。 我再也没有称它们为“初创公司”…