From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/zh-cn/web/svg/tutorial/texts/index.html | 74 +++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 files/zh-cn/web/svg/tutorial/texts/index.html (limited to 'files/zh-cn/web/svg/tutorial/texts/index.html') diff --git a/files/zh-cn/web/svg/tutorial/texts/index.html b/files/zh-cn/web/svg/tutorial/texts/index.html new file mode 100644 index 0000000000..6380942179 --- /dev/null +++ b/files/zh-cn/web/svg/tutorial/texts/index.html @@ -0,0 +1,74 @@ +--- +title: Texts +slug: Web/SVG/Tutorial/Texts +translation_of: Web/SVG/Tutorial/Texts +--- +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
+ +

在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。

+ +

基础

+ +

我们已经在之前入门示例中看到了，在一个SVG文档中，<text>元素内部可以放任何的文字。

+ +
<text x="10" y="10">Hello World!</text>
+
+ +

属性x和属性y性决定了文本在视口中显示的位置。属性text-anchor，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。

+ +

和形状元素类似，属性fill可以给文本填充颜色，属性stroke可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。

+ +

设置字体属性

+ +

文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：font-family、font-style、font-weight、font-variant、font-stretch、font-size、font-size-adjust、kerning、letter-spacing、word-spacing和text-decoration。

+ +

其它文本相关的元素

+ +

tspan

+ +

该元素用来标记大块文本的子部分，它必须是一个text元素或别的tspan元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。

+ +
<text>
+  <tspan font-weight="bold" fill="red">This is bold and red</tspan>
+</text>
+
+ +

tspan元素有以下的自定义属性：

+ +

x
+ 为容器设置一个新绝对x坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到tspan元素内的每一个字符上。

+ +

dx
+ 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。

+ +

此外还有属性y和属性dy作垂直转换。

+ +

rotate
+ 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。

+ +

textLength
+ 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。

+ +

tref

+ +

tref元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用xlink:href属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。

+ +
<text id="example">This is an example text.</text>
+
+<text>
+    <tref xlink:href="#example" />
+</text>
+
+ +

textPath

+ +

该元素利用它的xlink:href属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：

+ +
<path id="my_path" d="M 20,20 C 40,40 80,40 100,20" fill="transparent" />
+<text>
+  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
+    This text follows a curve.
+  </textPath>
+</text>
+ +
{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}
-- cgit v1.2.3-54-g00ecf