SVG的text使用

最新推荐文章于 2024-05-13 09:00:24 发布
最新推荐文章于 2024-05-13 09:00:24 发布
阅读量180 收藏
点赞数
文章标签： java

SVG的text使用：

参考：http://www.docin.com/p-7393979.html

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Title</title>
</head>
<body>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <path d="M20,10,20,120M10,30,100,30,M10,70,100,70M10,110,100,110" style="stroke:gray;" />
    <text x=20 y=30>Simplest Text</text>
    <text x=20 y=70 style="stroke:black">Outlined/filled</text>
    <text x=20 y=110 style="stroke:black;stroke-width:0.5;fill:none">Outlined only</text>
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <g style="font-size:18pt" >
        <text x=20 y=20 style="font-weight:bold">bold</text>
        <text x=120 y=20 style="font-style:italic">italic</text>
        <text x=20 y=60 style="text-decoration:underline">under</text>
        <text x=80 y=60 style="text-decoration:overline">over</text>
        <text x=140 y=60 style="text-decoration:line-through">through</text>
        <!-- word-spacing:10pt导致word之间的距离变大了  -->
        <text x=20 y=100 style="word-spacing:10pt">abc def</text>
        <!-- word-spacing:-3pt导致word之间的距离变小了  -->
        <text x=140 y=100 style="word-spacing:-3pt">abc def</text>
        <!-- letter-spacing:5pt导致letter之间的距离变大了  -->
        <text x=20 y=140 style="letter-spacing:5pt">abc def</text>
        <!-- letter-spacing:-6pt导致letter之间的距离变小了  -->
        <text x=140 y=140 style="letter-spacing:-6pt">abc def</text>
    </g>
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <g style="font-size:14pt">
        <path d="M100,10,100,100" style="stroke:gray;fill:none" />
        <!-- 文本水平对齐的方式三种：start,middle,end -->
        <text x=100 y=20 style="text-anchor:start">start</text>
        <text x=100 y=40 style="text-anchor:middle">middle</text>
        <text x=100 y=60 style="text-anchor:end">end</text>
    </g>
</svg>
<svg width="440px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- tspan 可以进行text标签内的字体的装饰 -->
    <text x=10 y=30 style="font-size:12pt" >Swith among 
        <tspan style="font-style:italic">italic</tspan>,normal and
        <tspan style="font-style:bold">bold</tspan> text.
    </text>
    <!-- 在有tspan的情况下，使用line-through会穿过每一个tspan的； -->
    <text x=10 y=50 style="text-decoration:line-through" >F<tspan dy=4>a</tspan><tspan dy=4>l</tspan><tspan dy=4>l</tspan></text>
    <!-- 注意后面的文字，会受到前面tspan的位置信息的影响 -->
    <text x=10 y=90>It's <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8" rotate="5 10 -5 -20 0 15">shaken</tspan>,not stirred.</text>
    <text x=10 y=130>C<tspan style="baseline-shift:sub">12</tspan> and 10<tspan style="baseline-shift:super">23</tspan></text>
</svg>
</div>
<div>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 通过旋转将字体变为纵向 -->
    <text x=10 y=20 transform="rotate(90,10,20)">Rotated 90</text>
    <!-- 使用writing-mode:tb将字体变为纵向 -->
    <text x=40 y=20 style="writing-mode:tb;">mode:tb</text>
    <!-- 可以使用glyph-orientation-vertical:0将字母变为垂直方向;其值只能是90的倍数 -->
    <text x=70 y=20 style="writing-mode:tb;glyph-orientation-vertical:0">mode:tb</text>
    <!-- 可以使用letter-spacing:-3pt缩小字母之间的距离 -->
    <text x=100 y=20 style="writing-mode:tb;glyph-orientation-vertical:0;letter-spacing:-3pt">mode:tb</text>
</svg>
<svg width="240px" height="240px" xmlns="http://www.w3.org/2000/svg">
    <!-- 文本是水平的时候可以使用glyph-orientation-horizontal:90将字母方向旋转，其值只能是90的倍数 -->
    <text x=10 y=20 style="glyph-orientation-horizontal:90">this is text</text>
</svg>
</div>
</body>
</html>

 

weixin_33861800
关注
svg text标签文字超出处理方案
qq_43370509的博客
07-06 2038
svg text标签特殊处理方式
SVG 文本（text）
司马懿的西山居
11-26 1万+
<text>属性介绍 （x，y）是文本左下角的坐标 dx（dx1，……）是文本相对基点x向右偏移的距离 dy（dy1，……）是文本相对基点y向下偏移的距离 text-anchor文本相对基点（x，y）的位置 start 文字在基点的右上方 middle 文字在基点的正上方 end 文字在基点的左上方 textLength 文本长度 lengthAdjust 调整文本的收缩或扩张方式，与textLe
svg之text
xiaozhuangyumaotao的博客
06-02 1490
svg里面的text标签用来定义文本，看下面的效果： 怎么实现的呢？我们先编写text.svg: 1 2 3 4 5 6 7 8 <?xmlversion="1.0"standalone="no"?> <!DOCTYPEsvgPUBLIC"-//W3C//DTDSVG1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/s...
svg text参考
long316的专栏
02-13 103
http://www.w3.org/TR/SVG11/text.html#TextElement 4.4 坐标的显示 在每个图层中加入onmousemove="changeText(evt)"，通过javascript编写changeText(evt)函数，从而实现图形坐标的显示。 function changeText(evt) { targetXtext=svgDo...
SVG 研究之 text 文字
非常道的博客
03-17 3898
「文字」雖然字面上的解釋很簡單，但深入研究之後，發現 SVG 對於文字的設定，比我想像的複雜得多，但也因為有了這些我所不知道的設定和屬性，讓原本單純樸實的文字，更添加了幾分華麗的色彩和變化，這篇將介紹文字基本的屬性設定，以及一些進階的文字用法，學完之後，也就更能使用程式來控制文字，製作出與眾不同的動畫和特效了。基本用法文字的基本用法很簡單，就是使用&lt;text&gt;&lt;/text&gt;...
svg文本＜text＞详解
lweiyue的专栏
07-14 1万+
在SVG中，text的基本用法如下： 其效果如下图所示： 注意上图中红点的位置坐标即为(20,20)。可以看到，默认情况下，text使用以下默认属性：可以对文字的颜色、字体、字体大小、是否粗体、是否有下划线、是否斜体等进行设置。需要注意的是，样式基本与html相同，除了color，svg中使用fill进行颜色设置。 其效果如下图所示：水平对齐的方式有三种，分别是左对齐、居中对齐、右对齐。其设置的属性是text-anchor，对应的值分别是start、middle、end。默认值是start。居中对齐...
svg.textwap.js:这个插件覆盖了 SVG.Text 对象的 text 和 tspan 方法。 支持给定文本宽度的文本换行。 该插件基本上根据包含的空格拆分文本，并尝试对 SVG.Text 对象的指定宽度进行最佳匹配
07-09
这是库的插件，它覆盖了SVG.Text的默认text和tspan方法，以支持换行。 svg.textwrap.js 根据 MIT 许可条款获得许可。 用法 在 html 文档中包含 svg.js 后包含此插件。 不要忘记指定width行的文本元素的width ，...
svg-text-to-path:扫描SVG文件并进行转换的Ruby脚本给定现有SVG字体的路径中的标签
05-06
克隆仓库： git clone https://github.com/caesarsol/svg-text-to-path.git 然后使用rake install安装gem。 您的svg-ttp可执行文件现在应该在PATH中。 用法： svg-ttp input.svg output.svg 测验 运行./bin/svg-...
SVG Text Layout Words as Art azw3
10-06
SVG Text Layout Words as Art 英文azw3 本资源转载自网络，如有侵权，请联系上传者或csdn删除 本资源转载自网络，如有侵权，请联系上传者或csdn删除
svg-text-animate:一个Javascript库，用于在浏览器中将文本转换为SVG笔触动画
04-24
svg-text-animate.js [] [] Svg-text-animate 一个在浏览器环境中将输入文本转化为描边动画的工具 demo 在线生成工具 使用方法 下载使用 从 中下载zip包并解压，在dist文件夹下找到编译好的js文件，通过以下方式...
svg中text标签字体、颜色、样式、大小、居中、旋转、垂直、text长度、tspan、textPath详解
热门推荐
weixin_40779234的博客
02-22 2万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
9. SVG中的text元素
最新发布
一名全栈开发工程师
05-13 688
SVG (Scalable Vector Graphics) 提供了强大的文本渲染能力，其中元素是常用 的文本操作的元素。本文将详细介绍标签的基本使用方法，并展示如何通过和增强文本的表现力。
Text-svg元素详解
Sabrina0911Chen的专栏
05-04 3913
字号：大 中 小 本文为Scalable Vector Graphics (SVG) 1.1 Specification中text部分，学习笔记。http://www.w3.org/TR/SVG11/text.html#TextElement1.The text element主要属性有：x,y,dx,dy,rotate,textLength,lengthAdjust
html svg text,如何使用SVG Text
weixin_42502896的博客
06-26 937
SVG文本是将图形和文本两者结合得最好的东西。它可以像其它图形元素一样渲染，这样你可以添加描边和填充，像图形、线条和箭头那样。它还可以被打包成XML字符数据，也就是说它是真的文本。SVG文本是可访问的。你可以选中它，复制，在其它位置粘贴。它可以被屏幕阅读器读取，也可以在搜索引擎中进行搜索。你可以设置它在水平方向上排列，或者垂直都可以，还可以让文本沿着你创建的各种弯弯曲曲的路径排列。距离我上次讲解S...
SVG之text
weixin_34195364的博客
05-04 508
svg里输入文本用<text>元素 <text>基本属性 x,y stroke,fill font styles (x,y)用于指定文字起始位置。准确的说，x指定文字最左侧坐标位置，y指定文字baseline所处y轴位置。fill的默认为black，stroke默认为none。如果设置了stroke，字的边缘会...
svg基本标签
caiaop的博客
06-19 4100
学习站点： 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中text标签换行显示,并实现拖拽移动text标签
ju__ju的博客
04-02 2245
如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割, 例如 图片中 的文本 嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒 然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒'] //x 和 y 是做鼠标移动时回传出来的 let arr =['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒...
svg文字渐变：颜色+描边+阴影（vue实现）
sjp991012的博客
09-12 1104
svg文字渐变：颜色+描边+阴影
在Vue中使用svg格式字体图标
weixin_44305462的博客
06-18 651
在Vue中使用svg格式字体图标 1、新建一条分支，在新分支上修改，测试无误后合并到开发分支(建议) 2、先安装svg-sprite-loader ( 在打包时 处理svg格式并展示到项目中的过滤器 ) npm install svg-sprite-loader --save 3、在vue.config.js中配置svg过滤器 const path = require('path') const fs = require('fs') const resolve = (dir) => { ret
svg text 动画
09-03
### 回答1： SVG文本动画可以通过CSS动画或JavaScript实现。以下是两种实现方式： 1. CSS动画：使用CSS的@keyframes规则定义动画，并将其应用于SVG文本元素。例如，可以使用以下代码创建一个向上移动的文本动画： ``` <svg> <text x="50%" y="50%" text-anchor="middle">Hello World!</text> </svg> <style> text { animation: move-up 2s ease-in-out infinite; } @keyframes move-up { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } </style> ``` 2. JavaScript：使用SVG的API（如getBBox()和setAttribute()）来操作SVG文本元素的属性，从而创建动画效果。例如，可以使用以下代码创建一个文本放大缩小的动画： ``` <svg> <text x="50%" y="50%" text-anchor="middle" font-size="24">Hello World!</text> </svg> <script> var textElem = document.querySelector('text'); var originalFontSize = textElem.getAttribute('font-size'); var scaleFactor = 1.2; function animate() { textElem.setAttribute('font-size', originalFontSize); textElem.animate([ { transform: 'scale(1)' }, { transform: 'scale(' + scaleFactor + ')' }, { transform: 'scale(1)' } ], { duration: 1000, easing: 'ease-in-out', iterations: Infinity }); } animate(); </script> ``` 这些例子仅仅是SVG文本动画的简单介绍，你可以根据自己的需求和创意，使用更多的SVG API和CSS属性来创建更加复杂和炫酷的动画效果。 ### 回答2： SVG（可缩放矢量图形）是一种用于在网页上创建图形的XML标记语言。在SVG中，我们可以使用文本元素创建文字，并通过动画效果使其呈现出各种变化。 要创建SVG文本动画，我们通常可以使用CSS或JavaScript来实现。 使用CSS，我们可以通过@keyframes规则来定义动画的关键帧。我们可以为文本元素添加CSS类，并为该类添加动画属性，例如动画名称、持续时间和重复次数。然后，我们可以定义具体的关键帧，例如起始状态、中间状态和结束状态，以实现文本的动态效果。通过在关键帧之间设置适当的过渡，我们可以创建平滑的动画效果。最后，通过将CSS动画应用于文本元素，我们可以触发动画的播放。 另一种方法是使用JavaScript来实现SVG文本动画。我们可以使用SVG DOM API来获取文本元素，然后使用JavaScript来对元素属性进行动态修改。通过改变文本的位置、旋转角度、透明度等属性，我们可以实现各种动画效果。我们还可以使用JavaScript库如GSAP来简化动画的操作和控制。 无论我们选择CSS还是JavaScript，都可以使用SVG的特性和功能来创建各种文本动画效果。我们可以实现闪烁的字体、文字路径动画、字体逐渐出现和消失等效果。通过探索不同的动画属性和效果，我们可以创造出独特且吸引人的SVG文本动画效果。 ### 回答3： SVG文本动画是一种使用可缩放矢量图形（SVG）来创建动画效果的技术。SVG文本动画可以通过在SVG文本元素中应用不同的属性和效果来实现。 首先，我们可以使用CSS来为SVG文本元素应用一些基本的动画效果。可以使用@keyframes规则来定义动画的关键帧，并使用animation属性将其应用于SVG文本元素。通过指定关键帧的属性值和持续时间，可以创建各种效果，比如逐字显示、渐变、旋转等。 其次，我们可以使用SVG的<animate>元素来创建更复杂的文本动画效果。通过在SVG文本元素中插入<animate>元素并设置关键属性，我们可以实现文本的平移、缩放、旋转等动态效果。可以通过设置不同的动画属性值、持续时间和重复次数来控制动画的效果。 此外，我们还可以使用JavaScript来控制SVG文本的动画。通过使用SVG的DOM API，我们可以动态地改变SVG文本元素的属性值来实现动画效果。可以通过在JavaScript中编写动画函数，并将其与SVG文本元素关联起来，实现更复杂的动画交互效果。 总之，SVG文本动画是一种强大的技术，可以为网页和应用程序添加各种吸引人的动画效果。通过合理地运用CSS、SVG和JavaScript，我们可以创造出丰富多样的SVG文本动画，提升用户体验并增加视觉吸引力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值