| 添加文本 |
<nobr>第 1 页（共3 页）</nobr> |
SVG 的强大能力之一是它可以将文本控制到标准 HTML 页面不可能有的程度，而无须求助图像或其它插件（后者会带来可访问性挑战）。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。
一个不足之处是 SVG 不执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。
可以使用 tspan 元素将文本元素分成几部分，允许每部分有各自的样式。在 text 元素中，空格的处理与 HTML 类似；换行和回车变成空格，而多个空格压缩成单个空格，如下面的早期示例所示：
xml 代码
- <!---->xml version="1.0"?>
- <!---->
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
-
- <desc>Textdesc>
- <defs>
- defs>
-
- <g>
-
- <text x="20" y="50" font-size="30">
- Colors can be specified
- text>
- <text x="20" y="100" font-size="30">by their
- <tspan fill="rgb(255,0,0)">Rtspan>
- <tspan fill="rgb(0,255,0)">Gtspan>
- <tspan fill="rgb(0,0,255)">Btspan>
- valuestext>
- <text x="20" y="150" font-size="30">
- or by keywords such as
- text>
- <text x="20" y="200" font-size="30">
- <tspan fill="lightsteelblue">lightsteelbluetspan>,
- text>
- <text x="20" y="250" font-size="30">
- <tspan fill="mediumseagreen">mediumseagreentspan>,
- text>
- <text x="20" y="300" font-size="30">and
- <tspan fill="darkorchid">darkorchidtspan>.
- text>
-
- g>
- svg>
-
-
| 使用 CSS 属性 |
<nobr>第 2 页（共3 页）</nobr> |
实际上，所有的属性（对于所有元素，不仅是文本）都可以用级联样式表与一个元素关联，并且文本的所有 CSS 属性都在 SVG 图像中可用。
可以直接用样式属性设计元素的样式，或者引用样式表设计元素的样式。不应该解析样式表（因为它们偶尔包含会引起问题的字符），因此将它们置于 XML CDATA 节。
xml 代码
- <!---->xml version="1.0"?>
- <!---->
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
-
- <desc>Textdesc>
- <defs>
- <style type="text/css">
- <!---->
- .abbreviation { text-decoration: underline; }
- ]]>
- style>
- defs>
-
- <g>
-
- <text x="20" y="50" font-size="30">Colors can be specifiedtext>
- <text x="20" y="100" font-size="30">by their
- <tspan fill="rgb(255,0,0)" class="abbreviation">Rtspan>
- <tspan fill="rgb(0,255,0)" class="abbreviation">Gtspan>
- <tspan fill="rgb(0,0,255)" class="abbreviation">Btspan>
- valuestext>
- <text x="20" y="150" font-size="30">or by keywords such astext>
- <text x="20" y="200">
- <tspan style="fill: lightsteelblue; font-size:30">
- lightsteelblue
- tspan>,
- text>
- . . .
- g>
- svg>
-
-
| 路径上的文字 |
<nobr>第 3 页（共3 页）</nobr> |
在纯 HTML 中不可能具有的一个 SVG 能力是将文本沿路径排列。要实现这一点，需创建一个链接到预定义的路径信息的 textPath 元素：
xml 代码
- <!---->xml version="1.0" standalone="no"?>
- <!---->
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
- <svg width="400" height="300" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <desc>Text on a pathdesc>
- <defs>
- <path id="wavyPath"
- d="M75,100 c25,-75 50,50 100,0 s50,-50 150,50"/>
- defs>
- <rect x="1" y="1" width="398" height="200"
- fill="none" stroke="blue" />
-
- <text x="50" y="50" font-size="14">
- <textPath xlink:href="#wavyPath">
- Text travels along any path that you define for it.
- textPath>
- text>
-
- svg>
-
-
分享到：
相关推荐
本教程“SVG经典教程2”是SVG学习的初级教程，旨在帮助初学者深入理解并掌握SVG的核心概念和实用技巧。 ### 1. SVG的基本概念 SVG图像由一系列几何形状组成，如线条、矩形、圆形、曲线等，这些形状在放大或缩小时仍...
这个“SVG经典教程1 (SVG从入门到精通)”上册，作为初级教程，旨在帮助读者快速掌握SVG的基本概念和实践技巧。 教程可能涵盖以下关键知识点： 1. SVG基础知识：解释SVG的定义，以及与位图（如JPEG或PNG）的区别。...
这篇“SVG入门教程(三) 绘制”显然是系列教程的一部分，旨在帮助初学者掌握如何使用SVG进行图形绘制。在本教程中，我们将深入探讨SVG的基本绘图元素和方法。 SVG的优势在于其矢量特性，这意味着无论放大多少倍，...
1. 基于XML标准：SVG图像的代码是基于可扩展标记语言XML，这意味着SVG文件不仅可以由图形编辑软件创建和编辑，还可以用文本编辑器进行编辑。它的可读性使开发者可以轻松地通过脚本语言对其进行操作和动态生成。 2. ...
在本篇SVG入门教程(二)中，我们将深入探讨SVG（Scalable Vector Graphics）的基本概念，以及如何在SVG中定义和组织元素。SVG是一种基于XML的矢量图像格式，它允许我们创建可缩放、高质量的图形，适用于网页和其他...
作为一个初级教程，它旨在帮助初学者理解和掌握SVG的基本概念和使用方法，通过实例教学，使得学习过程更加直观和易懂。 教程的内容通常会涵盖以下几个方面： 1. **是否应学习SVG**：对于任何从事前端开发或者图形...
在SVG教程中，XSLT用于根据源XML文档动态生成SVG图像，这意味着SVG图形可以根据数据的变化而动态更新，提供了一种数据驱动的图形生成方法。 【SVG的应用场景】 SVG广泛应用于地图、图表、图标设计、网页设计、移动...
### SVG技术入门与提高 #### 一、SVG技术概述 **SVG**，全称为 **Scalable Vector Graphics**，即 **可伸缩矢量图形**，是由W3C（World Wide Web Consortium）在2000年发布的一种开放标准文本式矢量图形描述语言。...
2. **SVG元素和属性**：详细解析各种SVG元素，如线条、曲线、文本和渐变，并解释如何通过属性来定制它们。 3. **路径绘制**：讲解`<path>`元素，包括命令和参数，以及如何绘制复杂路径。 4. **样式和CSS**：说明如何...
7. **SVG性能优化**：考虑使用`aria-hidden`属性隐藏SVG的辅助文本，提高可访问性；使用`viewBox`属性控制图形的视口，以适应不同尺寸的设备；对于大型SVG，可以考虑使用懒加载技术，只在需要时加载。 8. **CSS与...
SVG入门实例通常从学习基本的SVG元素开始。SVG的基本形状元素包括矩形（）、圆形（）、椭圆（）、线条（）、折线（）、多边形（）和路径（）。这些元素各自拥有独特的属性，用于定义形状的细节，如尺寸、位置、颜色...
在SVG-master这个压缩包中，很可能包含了SVG的基本示例代码、教程文档或练习项目，通过学习这些内容，你可以深入理解SVG的工作原理，并掌握创建和编辑SVG图形的技能。无论是前端开发、UI设计还是数据可视化，SVG都是...
SVG图像由一系列图形元素组成，包括路径、圆形、椭圆、矩形、线、多边形、文本等。这些元素通过XML标签来定义，并且可以包含样式、变换、事件处理等属性。例如，一个简单的SVG矩形可以这样表示： ```xml <svg width...
学习SVG基础入门，不仅能够理解基本的图形绘制，还能掌握如何创建交互式和动态图形，这对于Web开发者和设计师来说是一项重要的技能。通过实践和探索，可以深入理解和应用SVG的各种特性和技巧，提升作品的质量和专业...
这篇“HTML入门教程”旨在帮助初学者掌握HTML的基本概念和使用方法，从而能够制作出属于自己的网页。 一、HTML简介 HTML是由W3C（万维网联盟）制定的一种标记语言，它通过标签来描述网页的结构和内容。这些标签告诉...
### SVG教程：深入理解可伸缩向量图形 #### 概念解析与入门指南 **SVG**，全称为**Scalable Vector Graphics**，是一种基于XML的语言，用于描述二维矢量图形及其行为。与传统的光栅图形（如GIF、JPEG）相比，SVG...
1. **在线教程**：W3School、MDN Web Docs等网站提供了丰富的SVG教程，适合初学者入门。 2. **书籍**：《SVG Mastery》、《SVG Essentials》等专业书籍深入讲解SVG技术。 3. **课程**：Coursera、Udemy等平台有专门...
3. **教你五分钟入门使用html5 svg绘制图形**：这可能是快速入门教程，教授基础的SVG语法和绘制图形的方法。 4. **1.SVG中添加onclick事件调用JS，调用父窗口的js**：这部分内容可能涉及到如何使SVG元素响应用户点击...
在《SVG经典入门》这本书中，你可能会学到如何创建和修改SVG元素，理解SVG的基本语法，学习如何利用SVG进行图形设计，以及掌握SVG在网页和其他应用场景中的实践技巧。这本书可能还会涵盖SVG与HTML、CSS、JavaScript...