svg中text标签字体、颜色、样式、大小、居中、旋转、垂直、text长度、tspan、textPath详解

最新推荐文章于 2024-06-11 09:44:56 发布
最新推荐文章于 2024-06-11 09:44:56 发布
阅读量2.6w 收藏 64
点赞数 10
文章标签： svg css
原文链接：https://www.runoob.com/svg/svg-fegaussianblur.html
版权

svg中text标签属性

< text >基本属性

定位 x、y， 颜色 fill， 描边 stroke，字号 font-size，粗细 font-weight，字体 font-family,，字体样式 font-style， 文本修饰 font-decoration,，间距 word-spacing、letter-spacing

(x,y)用于指定文字起始位置，准确的说，x指定文字baseline所处x轴位置，默认最左侧坐标位置，y指定文字baseline所处y轴位置。fill的默认为black。stroke默认为none，如果设置了stroke，字的边缘会再“描一层边”；如果设置了stroke并将fill设为none，呈现为空心字。

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>SVG Draw Arc</title>
  <style media="screen">
    .svgs{display: flex; flex-flow:row wrap; justify-content: space-around; width: 620px; margin: 0 auto;}
    .svgs svg{width:300px; height:200px; background: #F2F2F2; margin-bottom: 10px;}
  </style>
</head>
 
<body>
  <div class="svgs">
	<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    	<path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
    	<text x="0" y="14" >love life</text>
    	<text x="0" y="30" fill="#e1cbff" >love life</text>
   		<text x="0" y="46" fill="#e1cbff" stroke="black" >love life</text>
   		<text x="0" y="70" fill="#e1cbff" stroke="black" font-size="28" >love life</text>
   		<text x="0" y="94" fill="#e1cbff" stroke="black" font-size="28" font-weight="600">love life</text>
   		<text x="0" y="116" fill="#e1cbff" stroke="black" font-size="28" font-weight="600" font-family="Times New Roman">love life</text>
   	 	<text x="0" y="138" fill="#e1cbff" stroke="black" font-size="28" font-weight="600" font-family="Times New Roman" font-style="italic">love life</text>
    	<text x="0" y="166" fill="black" stroke="black" font-size="28" font-weight="600" font-family="Times New Roman" font-style="italic" text-decoration="underline">love life</text>
    	<text x="0" y="194" fill="none" stroke="#e1cbff" font-size="28" font-weight="600" font-family="Times New Roman" font-style="italic" letter-spacing="2">love life</text>
  	</svg>
  </div>
</body>
</html>

在这里插入图片描述
SVG提供了一个范围广泛stroke 属性：stroke、stroke-width、stroke-linecap、stroke-dasharray。

旋转 transform

<text x="50" y="24" font-size="28" font-family="Times New Roman" fill="black" transform="rotate(45)">love life</text>

在这里插入图片描述

对齐居中

默认 从起始位置(x,y)开始展示。但由于在svg中无法事先知道 的长度，所以无法仅通过改变(x,y)让 的中轴或结束位置位于指定位置。
但svg提供了一种更简单直接的方法实现这些对齐方式。
text-anchor属性可以改变(x,y)作为起始坐标的定义。
text-anchor="start"时，(x,y)为 的起始坐标。
text-anchor="middle"时，(x,y)为 的中轴坐标。
text-anchor="end"时，(x,y)为 的结束坐标。 

<svg>
    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
    <text x="150" y="30" font-size="28" font-family="Times New Roman" style="text-anchor: start">love life</text>
    <text x="150" y="60" font-size="28" font-family="Times New Roman" style="text-anchor: middle">love life</text>
    <text x="150" y="90" font-size="28" font-family="Times New Roman" style="text-anchor: end">love life</text>
</svg>

在这里插入图片描述

text长度、字符间隔

默认情况下无从获得 的长度，但可以通过textlength属性设置 长度。 内部字符会根据textLength自适应变化。通过lengthAdjust属性来设置字符变化规则。
lengthAdjust有两个可选属性值。

  • spacing
  • spacingAndGlyphs

spacing只调整字符之间的间隔；spacingAndGlyphs则会根据一定比例同时调整字符之间的间隔，以及字符本身宽度。

<svg>
    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
    <text x="0" y="30" textLength="150" lengthAdjust="spacing">love life</text>
    <text x="0" y="60" textLength="150" lengthAdjust="spacingAndGlyphs">love life</text>
    <text x="0" y="90">love life
        <tspan style="font-size: 10;">(normal length)</tspan>
    </text>
    <text x="0" y="120" textLength="60" lengthAdjust="spacing">Two words</text>
    <text x="0" y="160" textLength="60" lengthAdjust="spacingAndGlyphs">Two words</text>
</svg>

在这里插入图片描述

垂直text

有两种方法实现垂直显示text。一种使用transform，一种是text特有的writing-mode：tb(top to bottom)样式。
书上用writing-mode + glyph-orientation-vertical的实现方式在chrome上没生效。
个人认为使用transform（或者writing-mode:tb）+ rotate + letter-spacing实现起来更为灵活。

<svg>
    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
	<text x="50" y="20" style="writing-mode: tb;letter-spacing:5px" rotate="-90" >Love life as love you</text>
	<text x="70" y="20" transform="rotate(90, 70, 20)" style="letter-spacing:5px" rotate="-90" >Love life as love you</text>
</svg>

在这里插入图片描述

< tspan>

如果要实现在一整段文字中，让部分文字呈现出不同的样式，只用 是不现实的，在不知道一个 在哪儿结束的情况下，无法让另一个 紧接在其后面。
允许被嵌入在 内部来实现以上场景。
除了 拥有的属性外，还有另外两个属性

  • dx, dy

(dx,dy)可以将 内的文字，以其初始位置为起点(0,0)，偏移(dx,dy)
(x,y)是将 内的文字定位到其坐标系的(x,y)位置。 

<svg>
    <path d="M 150 0 L 150 200 M 0 100 L 300 100" stroke="#CCC" stroke-width="1" />
	<text x="10" y="30" font-size="28" font-family="Times New Roman">Love life
      <tspan x="20" y="60" font-size="28" font-family="Times New Roman">Love life</tspan>
      <tspan x="30" dy="30" font-size="28" font-family="Times New Roman">Love life</tspan>
    </text>
 </svg>

在这里插入图片描述

dx,dy还可以这么玩

<text x="30" y="30">
	Love
    <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8"
          rotate="5 10 -5 -20 0 15">life as</tspan>,
      love you
</text>

在这里插入图片描述
"shaken"一共六个字符，dx,dy,rotate分别各有六个数值，空格或逗号隔开，每个数值对相作用于应次序的字母。rotate可以对字符做旋转。
如果dx（或者dy,rotate）参数个数小于 内的字符个数，最后一个dx(dy,rotate)参数值将作用于多出的字符。

另外，上标下标除了可以用dy来抬高或降低字符位置，还有一个baseline-shift样式可以直接定义上标下标

<text x="20" y="25" style="font-size: 1.5rem;">
    C<tspan style="baseline-shift: sub;font-size: 1rem;">12</tspan>
    H<tspan style="baseline-shift: sub;font-size: 1rem">22</tspan>
    O<tspan style="baseline-shift: sub;font-size: 1rem">11</tspan> (sugar)
</text>
<text x="20" y="70" style="font-size: 1.5rem;">
    6.02 x 10<tspan baseline-shift="super" style="font-size:1rem">23</tspan>
    (Avogadro's number)
</text>

在这里插入图片描述

textPath 沿路径绘制文本

内嵌于 中的元素，通过xlink:href属性指向一个 元素，可以将其内部字符的baseline设置成指定的path。 

<defs>
    <path id="circle" d="M70 20a40 40 0 1 1 -1 0"></path>
</defs>
<text>
    <textPath xlink:href="#circle">
        Text following a circle.............
    </textPath>
</text>

在这里插入图片描述
超出 长度部分的文字将被隐藏。

默认的，的起始位置为 的起始位置。
元素还有一个startOffset属性，可以调整 起始位置。startOffset为百分数时，起始位置 = startOffset * 总长度。startOffset为具体数字时，起始位置 = startOffset + 的起始位置。
利用startOffset和text-anchor，可以实现文字居中摆放。 

<defs>
    <path id="semi" d="M110 100a50 50 0 1 1 100 0"></path>
</defs>
<use xlink:href="#semi" stroke="grey" fill="none"></use>
<text text-anchor="middle">
    <textPath xlink:href="#semi" startOffset="50%">
        Middle
    </textPath>
</text>

在这里插入图片描述

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 
    <defs>
          <path id="circlePath"
            d="M10,50
               C10,50 50,0 100,50
               C100,50 150,100 190,50
               M10,150
               C10,150 50,100 100,150
               C100,150 150,200 190,150" />
    </defs>
    <g fill="dodgerblue" font-size="15" font-family="楷体">
        <text x="20" y="40">
            <textPath xlink:href="#circlePath">
                SVG与文本：使用textPath进行字符串的显示
            </textPath>
        </text>
    </g>
    <use xlink:href="#circlePath" fill="none" stroke="blue" />
</svg>
</body>
</html>

在这里插入图片描述

关于空白符

关键就说一点，svg没有换行符！svg默认会把所有单个或连续多个空格、tabs、换行符转成单个空格。即使在css中将white-space设置为pre，换行符依然会被转换成空格！

推荐：svg画半圆详解

链接: svg画半圆详解.

推荐：svg画整圆详解

链接: svg画整圆详解.

多多_duoduo
关注
  • 10
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
SVG 文字居中整理
weixin_33895516的博客
08-09 8448
一、基于SVG文档的文字居中 text-anchor: middle; //水平方向居中 dominant-baseline: middle; //垂直居中 1.使用内联样式配置居中 &lt;svg style=' border:1px solid blue;width:300px;height:300px;'&gt; &lt;path d='M0,150 300,150 M150...
svg -> text文本水平、垂直居中。文本垂直对齐方式
baifu2766的博客
02-07 2205
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> svg{ ...
详解CSS定义字体、颜色、背景等属性
09-22
本文通过实例代码给大家介绍了CSS定义字体、颜色、背景等属性的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
推荐一款高效SVG文本包裹工具 - d3-textwrap
最新发布
gitblog_00001的博客
06-11 316
推荐一款高效SVG文本包裹工具 - d3-textwrap 项目地址:https://gitcode.com/vijithassar/d3-textwrap 在SVG设计中，长行文本的自动换行一直是一个挑战。尽管SVG提供了一些基础的方法，但实现起来往往既复杂又易出错。为了解决这个问题，我们向您推荐一个强大的开源插件——d3-textwrap，它为您提供了一种优雅且浏览器兼容性良好的解决方案。 1...
html5 svg里text的文本颜色怎么改变颜色
到得还来别无事，庐山烟雨浙江潮。
01-08 1万+
html5中的svg是可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图像的。颜色的定义是用stroke属性，可以指定颜色值。 定义svg： &lt;html&gt; &lt;body&gt; &lt;h1&gt;My first SVG&lt;/h1&gt; &lt;svg xmlns="http://...
svg文本＜text＞详解
lweiyue的专栏
07-14 1万+
在SVG中，text的基本用法如下： 其效果如下图所示： 注意上图中红点的位置坐标即为(20,20)。可以看到，默认情况下，text使用以下默认属性：可以对文字的颜色、字体、字体大小、是否粗体、是否有下划线、是否斜体等进行设置。需要注意的是，样式基本与html相同，除了color，svg中使用fill进行颜色设置。 其效果如下图所示：水平对齐的方式有三种，分别是左对齐、居中对齐、右对齐。其设置的属性是text-anchor，对应的值分别是start、middle、end。默认值是start。居中对齐...
SVG 文本（text）
热门推荐
司马懿的西山居
11-26 1万+
<text>属性介绍 （x，y）是文本左下角的坐标 dx（dx1，……）是文本相对基点x向右偏移的距离 dy（dy1，……）是文本相对基点y向下偏移的距离 text-anchor文本相对基点（x，y）的位置 start 文字在基点的右上方 middle 文字在基点的正上方 end 文字在基点的左上方 textLength 文本长度 lengthAdjust 调整文本的收缩或扩张方式，与textLe
HTML5笔记总结（三）SVG
javaScript1997的博客
12-16 655
一、SVG概述 SVG是一种图像文件格式，意思为可缩放的矢量图形。它是基于XML，由W3C联盟进行开发的。严格来说应该是一种开放标准的矢量图形语言，可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。 二、矢量图和位图 三、瞅个案例康康 <svg xmlns="http://www.w3.org/2000/svg" width="200" he
9. SVG中的text元素
一名全栈开发工程师
05-13 550
SVG (Scalable Vector Graphics) 提供了强大的文本渲染能力，其中元素是常用 的文本操作的元素。本文将详细介绍标签的基本使用方法，并展示如何通过和增强文本的表现力。
学习笔记——SVG.js中文本元素text相关方法
qq_41339126的博客
05-16 1603
SVG.js插件中text元素的相关方法svg.text()、newLine()、length()、text.text()、tspan()、build()、rebuild()、path()、textPath()、ax()、ay()、amove()、font()、leading()、clear()
设置 svg 颜色
liyichuanZhengzhou的博客
02-23 4523
设置 svg 颜色 代码格式： <svg xmlns="" viewBox=""><path d=""></path></svg> 方法一（推荐）： svg { fill:red; } -------------------------------------------------------------------------------------------------------------------------- 方法...
svg字体不能更改颜色
Jasonsanghb的博客
01-25 1973
svg字体不能更改颜色 在阿里图标等字体图标库中下载svg字体，发现不能更改颜色，这是因为本身每一个svg文件中有一个path元素，里面有fill属性，fill属性规定了字体的颜色，所以在外部父元素设置color是无法改变其颜色。有三种方法可以改变svg字体。 如果要改为黑色 方法1： 直接修改svg path元素中 fill属性为#000。但是这样的缺点就是只要用到这个字体图标都是黑色。 方法二： fill="#fff" 改为 fill="currentColor" 就可以在父元素中设置color为#
svg基本标签
caiaop的博客
06-19 3951
学习站点： https://www.runoob.com/svg/svg-path.html https://www.w3school.com.cn/svg 1.text文字标签 x 右起点 y 下起点 text-anchor 文字左右居中 2. image图片标签 x y width height xlink:href 图片位置 3.circle圆标签 cx cy r fill stroke stroke-width transparent 4.rect柱形标签 ....
SVG JS 动态赋值
卡尔特斯
11-02 775
通过 text 标签进行测试 <svg xmlns="http://www.w3.org/2000/svg" width="600" height="400"> <defs> <!-- 网格 --> <pattern id="grid" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse"> <path fill="none" ..
详细介绍SVG.js中textPath和text元素相关的一些方法，帮助大家更好的了解和使用这两个元素
百度一下 猎人社区
05-12 1471
接着，我们创建了一个text元素，并将其添加到textPath元素中，并使用fill()、move()和attr()方法设置其样式和位置。本篇文章详细介绍了SVG.js中textPath和text元素相关的一些方法，包括如何创建textPath元素并沿着路径添加文字，以及如何创建text元素并设置其位置、样式和动画等。上面的代码中，我们先使用draw.text()方法创建一个text元素，然后使用draw.path()方法创建一个路径，最后调用text.path()方法将路径添加到text元素中。
d3.js svg中的text字体大小设置
⚡
04-17 1万+
svg 的text有一个font-size属性 <text x="5" y="25" fill="red" font-size="30">A</text> 用d3.v4.js设置 svg.append("text") .attr("y", 25) .attr("x", 5) .attr("fill","red") ...
SVG标准解读-几何图形-图案填充-核心要点
插件开发
04-14 3948
文章目录1.SVG概述2.svg标签2.1.视图(viewport)和单位2.2.坐标系统2.3.viewBox3.g标签4.公共属性5.几何图形5.1 绘制直线5.2 绘制矩形5.3 绘制椭圆5.4 绘制圆5.5 多边形5.6 折线5.7 路径5.7.1 M指令和L指令5.7.2 H指令和V指令5.7.3 Q指令5.7.4 C指令5.7.5 T指令5.7.6 S指令5.7.7 A指令 1.SVG概述 SVG是一种图形文件格式，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢
SVG 文本（一）text、tspan 的基本使用，前端微信公众号开发
2401_84097678的博客
04-04 483
分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载/>分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可免费下载。
svg实现文本的垂直居中对齐样式
An_cf的博客
09-13 8148
项目中用到表格内画折线趋势图，本人使用的svg绘制简单折线；没有数据的单元格显示文字，为了不影响表格的宽度自适应，就想到在svg上写文字。于是就有了在svg上对文字样式进行垂直居中的需求，上代码： &lt;svg version="1.1" className={Style.svgLine}&gt; &lt;text x='50%' y='50%' className={Style.s...
怎样让svg中的<text>在一个固定的<rect>中居中
06-10
要让 `<text>` 在一个固定的 `<rect>` 中居中，需要设置 `<text>` 的 `x` 和 `y` 属性。假设你要让 `<text>` 在一个宽为 100，高为 50 的 `<rect>` 中居中，你可以按照以下方法设置： 首先，设置 `<rect>` 的 `x`、`y`、`width` 和 `height` 属性： ```html <rect x="50" y="50" width="100" height="50" /> ``` 然后，在 `<rect>` 中添加 `<text>` 元素，并设置 `x` 和 `y` 属性为 `<rect>` 的中心点： ```html <rect x="50" y="50" width="100" height="50"> <text x="75" y="75">Centered Text</text> </rect> ``` 注意，上面的 `x` 和 `y` 均为 75，这是因为要让 `<text>` 在 `<rect>` 中居中，需要把 `<text>` 的中心点与 `<rect>` 的中心点重合，也就是 `x` 和 `y` 均为 `<rect>` 的中心点坐标。 另外，还可以通过设置 `<text>` 的 `text-anchor` 属性来控制文本的水平对齐方式，比如设置为 `middle` 可以让文本水平居中对齐： ```html <rect x="50" y="50" width="100" height="50"> <text x="75" y="75" text-anchor="middle">Centered Text</text> </rect> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值