diff options
Diffstat (limited to 'files/zh-cn/web/svg/tutorial/texts/index.html')
| -rw-r--r-- | files/zh-cn/web/svg/tutorial/texts/index.html | 74 |
1 files changed, 74 insertions, 0 deletions
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 +--- +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> + +<p>在SVG中有两种截然不同的文本模式. 一种是写在图像中的文本，另一种是SVG字体。关于后者我们将在教程的后面进行讲解，现在我们主要集中前者：写在图像中的文本。</p> + +<h2 id="基础">基础</h2> + +<p>我们已经在之前<a href="/zn-CN/docs/Web/SVG/Tutorial/Getting_Started">入门示例</a>中看到了，在一个SVG文档中，<text>元素内部可以放任何的文字。</p> + +<pre class="brush:xml notranslate"><text x="10" y="10">Hello World!</text> +</pre> + +<p>属性x和属性y性决定了文本在视口中显示的位置。属性<code>text-anchor</code>，可以有这些值：start、middle、end或inherit，允许决定从这一点开始的文本流的方向。</p> + +<p>和形状元素类似，属性<code>fill</code>可以给文本填充颜色，属性<code>stroke</code>可以给文本描边，形状元素和文本元素都可以引用渐变或图案, 相比较CSS2.1只能绘制简单的彩色文字，SVG显得更具有优势。</p> + +<h2 id="设置字体属性">设置字体属性</h2> + +<p>文本的一个至关重要的部分是它显示的字体。SVG提供了一些属性，类似于它们的CSS同行，用来激活文本选区。下列每个属性可以被设置为一个SVG属性或者成为一个CSS声明：<code>font-family</code>、<code>font-style</code>、<code>font-weight</code>、<code>font-variant</code>、<code>font-stretch</code>、<code>font-size</code>、<code>font-size-adjust</code>、<code>kerning</code>、<code>letter-spacing</code>、<code>word-spacing</code>和<code>text-decoration</code>。</p> + +<h2 id="其它文本相关的元素">其它文本相关的元素</h2> + +<h3 id="tspan">tspan</h3> + +<p>该元素用来标记大块文本的子部分，它必须是一个<code>text</code>元素或别的<code>tspan</code>元素的子元素。一个典型的用法是把句子中的一个词变成粗体红色。</p> + +<pre class="brush:xml notranslate"><text> + <tspan font-weight="bold" fill="red">This is bold and red</tspan> +</text> +</pre> + +<p><code>tspan</code>元素有以下的自定义属性：</p> + +<p><strong>x</strong><br> + 为容器设置一个新绝对<code>x</code>坐标。它覆盖了默认的当前的文本位置。这个属性可以包含一个数列，它们将一个一个地应用到<code>tspan</code>元素内的每一个字符上。</p> + +<p><strong>dx</strong><br> + 从当前位置，用一个水平偏移开始绘制文本。这里，你可以提供一个值数列，可以应用到连续的字体，因此每次累积一个偏移。</p> + +<p>此外还有属性<strong>y</strong>和属性<strong>dy</strong>作垂直转换。</p> + +<p><strong>rotate</strong><br> + 把所有的字符旋转一个角度。如果是一个数列，则使每个字符旋转分别旋转到那个值，剩下的字符根据最后一个值旋转。</p> + +<p><strong>textLength</strong><br> + 这是一个很模糊的属性，给出字符串的计算长度。它意味着如果它自己的度量文字和长度不满足这个提供的值，则允许渲染引擎精细调整字型的位置。</p> + +<h4 id="tref">tref</h4> + +<p><code>tref</code>元素允许引用已经定义的文本，高效地把它复制到当前位置。你可以使用<code>xlink:href</code>属性，把它指向一个元素，取得其文本内容。你可以独立于源样式化它、修改它的外观。</p> + +<pre class="brush:xml notranslate"><text id="example">This is an example text.</text> + +<text> + <tref xlink:href="#example" /> +</text> +</pre> + +<h4 id="textPath">textPath</h4> + +<p>该元素利用它的<code>xlink:href</code>属性取得一个任意路径，把字符对齐到路径，于是字体会环绕路径、顺着路径走：</p> + +<pre class="brush:xml notranslate"><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></pre> + +<div>{{PreviousNext("Web/SVG/Tutorial/Patterns", "Web/SVG/Tutorial/Basic_Transformations")}}</div> |