svg 文字_html/css_WEB-ITnose

タグ

SVG で タグを使用してテキストを定義します。例1のような

svgで書く

平らな道をジグザグに進む

例1 ドーム

えーっ

例1では、x="0" y="15" がテキストの位置座標です
もしかしたら疑問があるかもしれませんが、なぜですか？テキストと上位 15 位の間の距離はどれですか?まず、ベースラインの概念を理解する必要があります。CSS に慣れている学生は、vertical-align: ベースラインを使用するでしょう。

これは私たちの焦点では​​ありません。「CSS ベースライン: 良いもの、悪いもの、そして醜いもの」に移りましょう。翻訳: 「CSS ベースラインの方法」
図に示すように、SVG の xy の座標はベースラインに基づいています。 :

それで見てください、意外なことに、テキストは上から15pxではありません。

タグ

を含むテキスト グループとして タグを設定することもでき、各 に異なる位置とテキスト形式を指定できます。

例2 Dome

<svg height="30" width="200">    <text x="0" y="15" fill="red">在平坦的路上曲折前行</text></svg>

tspanのx yが設定されていない場合、テキストはcssのようにインラインで表示されます

svgでのテキスト接続

テキストをリンクとして設定することもできます

例3 Dome

<svg height="90" width="200">    <text x="10" y="20" style="fill:red;">Several lines:        <tspan x="10" y="45">First line.</tspan>        <tspan x="10" y="70">Second line.</tspan>    </text></svg>

注意してくださいここで、HTML の a タグ内にテキストを直接記述することはできません。ここでのテキストはテキスト オブジェクトなので、このオブジェクトへのリンクを設定する必要があります。

transform

これで、SVG のテキスト タグは通常のニーズを満たすことができます。しかし、実際はそうではありません。「やるべきことはたくさんあります。」 ~

たとえば、テキストを回転させます 例 4

例 4 Dome

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">    <a xlink:href="http://www.w3schools.com/svg/" target="_blank">        <text x="0" y="15" fill="red">I love SVG!</text>    </a></svg>

transform="rotate(30 20,40)" は、(20.40) の位置で時計回りに 30 度回転することを意味します

dx dy

svgはいいえ タイプセットに関連したサポートを提供しますが、dx dy を通じて分散テキストを設定できます

それを体験してみましょう:

例 5 Dome

<svg height="60" width="200">    <text x="0" y="15" fill="red"             transform="rotate(30 20,40)">在平坦的路上曲折前行</text></svg>

rotate

rotate テキストの回転属性、回転は値のリストにすることができます以下の例のように、対応する文字に作用します

例 6 ドーム

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="10" y="20">        <tspan dx="0 5 10 15 20">12345</tspan>     </text>    <text x="10" y="65">        <tspan dy="0 5 10 15 20">12345</tspan>     </text>    <text x="10" y="150">        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">12345</tspan>     </text>    <text x="10" y="215">        <tspan dx="0 5 10 15 20" dy="0 5 10 15 20">我爱你中国</tspan>     </text></svg>

回転の単位は度です。私たちの習慣は画面の位置決めであるため、回転は y に沿って時計回りです。 -軸。回転は、各文字のベースラインと文字の左側に基づいて行われます。この例では、回転よりも多くの文字 (文字) が存在します。このとき、余分な文字は回転リストの最後の規則に従って定義されます。

textLength

textLength は理解するのが難しく、テキストの長さを意味するものではありません。テキストを指定する SVG ビューアは、css text-align:justify

と同様に、textLength を使用してこれらのテキストを両端に揃えます。 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="10" y="20">        <tspan rotate="0 5 10 15 25">在平坦的路上曲折前行</tspan>     </text></svg>

もあります。 textLength---lengthAdjust

lengthAdjust で使用される属性には、spacing (デフォルト) と spacingAndGlyphs の 2 つの値があります。 spacingAndGlyphs に設定すると、textLength を埋めるのに適した文字になるまで文字が引き伸ばされます。理解するのは簡単ではありません。例を見ればわかります。

例 7 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="10" y="20">        <tspan textLength="400" >在平坦的路上曲折前行</tspan>     </text></svg>

使用法

タグの使用:

Illustrator を使用したことのある友人は、パスに沿ってテキストを作成したり、さまざまな形のテキストを作成したりできることを知っています。 を使用して を定義する必要があります (砂漠の後の関連記事で紹介します)。パスを定義した後、テキストは定義されたパスに従うことができます。

例 8 Dome

<svg xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink"      width="400" height="300" viewBox="0,0,400,300">    <text x="0" y="20">        <tspan                 textLength="400"                 lengthAdjust="spacing"                >在平坦的路上曲折前行</tspan>     </text>    <text x="0" y="80">        <tspan                 textLength="400"                 lengthAdjust="spacingAndGlyphs"                >在平坦的路上曲折前行</tspan>     </text></svg>

xlink:href を指定して startOffset を使用してパス上の開始位置を指定します。

ここで、xlink:href はパスを指定するだけでなく、テキストを指定することもできます。例:

例 9 ドーム