SVG <text>
要绘制文本,使用<text>
例:
- <!DOCTYPE html>
- <html>
- <title>项目</title>
- <body style="background-color: aqua;">
- <h1>SVG Text</h1>
- <svg width="550" height="150">
- <g>
- <text x="40" y="23">Text: </text>
- <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/ </text>
- </g>
- </svg>
- </body>
- </html>
运行后效果如下:
代码解释
x:定义了文本左上角的位置 ,y:定义文本的顶部位置,width:定义宽度,height:定义高度。
fill:fill属性用于定义填充颜色。
用于创建旋转文本。
例:
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg height="100" width="200">
- <text x="0" y="15" fill="red" transform="rotate(30 20,40)">http://pdcfighting.com/</text>
- </svg>
- </body>
- </html>
运行后效果如下:
用法解释
x:定义左上角的位置。y:它定义顶部位置。width:定义宽度。height:定义高度。
fill:fill属性用于定义填充颜色。
元素可以安排任何分小组与
例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg width="570" height="100">
- <g>
- <text x="40" y="23">Multiline Text: </text>
- <text x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/
- <tspan x="40" y="60" font-weight="bold">ddaad</tspan>
- </text>
- </g>
- </svg>
- </body>
- </html>
运行后效果如下:
用法解释
x:定义左上角的位置。y:它定义顶部位置。width:定义宽度。height:定义高度。
fill:fill属性用于定义填充颜色。
用于创建具有超级链接的文本
示例
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg width="500" height="100">
- <g>
- <text x="20" y="10">Text as Link: </text>
- <a xlink:href="http://pdcfighting.com/" target="_blank">
- <text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">http://pdcfighting.com/</text>
- </a>
- </g>
- </svg>
- </body>
- </html>
运行后效果如下:
下面是SVG代码:
- <!DOCTYPE html>
- <html>
- <body style="background-color: aqua;">
- <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
- <path id="path1" d="M75,20 a1,1 0 0,0 100,0" />
- </defs>
- <text x="10" y="100" style="fill:red;">
- <textPath xlink:href="#path1">I love SVG I love SVG</textPath>
- </text>
- </svg>
- </body>
- </html>
运行效果如下:
本文基于Html基础,详细的介绍了SVG中常见的文本效果,如何变换文字,如何在文本,如何添加文字超链接等等。
欢迎大家积极尝试,有时候看到别人实现起来很简单,但是到自己动手实现的时候,总会有各种各样的问题,切勿眼高手低,勤动手,才可以理解的更加深刻。
代码很简单,希望对你学习有帮助。
背景 有时候我会碰到快速搭建测试服务的需求,比如像这样: 搭建一个 HTTP Servi...
前言 微服务成了互联网架构的标配模式,对微服务之间的调用的流量治理和管控就尤...
创业与投资的本质,都是追寻一种能够穿越时空,抵达未来的高效方式。 德勤管理咨...
本文转载自微信公众号「后端Q」,作者conan。转载本文请联系后端Q公众号。 概述 ...
1.某女生寝室门口贴着一个告示男生与饭盒不得入内,问何解?答曰两者都会搞大女...
基于阿里巴巴的互联网架构、大数据技术,利用混合云架构打造全新的云化电子税 务...
3月24日,腾讯发布2020年Q4及全年财报,其中金融科技及企业服务第四季收入385亿...
1.百度是个大骗子,我抄了十几年的满分作文却从未得过满分。 2.学神在刷难题,...
作者 | 楚奕 来源 | 阿里技术公众号 这篇文章主要从技术视角介绍下跨平台WebCanv...
1.在报名的路上,我看见远处的学校,轰!的一声没了。希望如此。 2.男:我一直...