8. svg學習筆記-文本

時間 2019-12-04

標籤 svg 學習筆記文本简体版

原文原文鏈接

毫無疑問，文本也是svg中組成的重要部分，在svg中，用<text>元素來建立文本，文本的使用格式以下：html

<text x="20" y="30" style="font-family:'微軟雅黑'; font-size:25px;">這是一個text元素</text>網絡

其中的x和y屬性默認狀況下是第一個字符左下角的位置座標，style中能夠是CSS的文字相關屬性，好比：font-family，font-size，font-weight，font-style，text-decoration，word-spacing，letter-spacing等，示例以下：svg

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <path d="M 10,30 L 250,30" stroke="black"></path>
        <path d="M 20,10 L 20,150" stroke="black"></path>
        <text x="20" y="30" style="font-family:'微軟雅黑'; font-size:20px;">這是一個text元素</text>
</body>
</html>

效果以下：學習

咱們大多數的時候可能並不單單想讓文本左對齊，而是居中對齊或者是右對齊，<text>元素的text-anchor屬性來指定文本的對齊方式，取值有start，middle，end三種，分別對應左對齊，中間對齊，右對齊。當設置text-anchor屬性的值爲start時（默認），<text>元素的x和y屬性表示最左邊文字左下角的座標；設置爲middle時，<text>元素的x和y屬性表示中間文字中間位置下邊的座標；設置爲end時，<text>元素的x和y屬性表示最右邊文字右下角的座標：示例以下：測試

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <path d="M 150,10 L 150,200" stroke="black"></path>
        <text x="150" y="60" text-anchor="end" style="font-family:'微軟雅黑'; font-size:20px;">這是一個text元素</text>
        <text x="150" y="100" style="font-family:'微軟雅黑'; font-size:20px;">這是一個text元素</text>
        <text x="150" y="140" text-anchor="middle" style="font-family:'微軟雅黑'; font-size:20px;">這是一個text元素</text>
    </svg>
</body>
</html>

效果以下：this

和html中元素和元素相似的是svg中<text>元素還能夠嵌套<tspan>元素，<tspan>元素的做用相似於html中的元素，但與元素不一樣的是，<tspan>元素有x，y，dx，dy，rotate幾個屬性：示例以下：spa

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="400" height="300" style="border:1px solid #000">
        <text x="20" y="40" stroke="none" fill="black">
            <tspan>網絡教育是當今國際國內教育發展的熱點，</tspan>
            <tspan x="20" y="65">也是現代教育技術的主流發展方向之一。</tspan>
            <tspan x="20" y="90">在傳統的教學中，大多數狀況下，知識是老師灌輸的，</tspan>
            <tspan x="20" y="115">學生只是被動接收。而在網絡教育中，</tspan>
            <tspan x="20" y="140">學習採用互動方式，從某種程度上說，</tspan>
            <tspan x="20" y="165">學生既是一個接收者，也是一個參與教育的主體。</tspan>
            <tspan x="20" y="190">這種交互式的教育，更有助於學生知識的得到、能力的培養，有助於更主動地去思考。</tspan>
        </text>
    </svg>
</body>
</html>

效果：3d

<text>，<tspan>元素中的文字不會自動換行（現象如上圖最後一行）。<tspan>中的x和y屬性與<text>元素的x，y屬性做用相同，dx和dy屬性是相對距離，當<tspan>元素指定dx屬性時，至關於將<tspan>元素向左（dx值爲負數）或者向右（dx值爲正數）偏移必定的距離；指定dy屬性時，至關於將元素向上（dy值爲負數）或者向下（dy值爲正數）偏移必定距離。而rotate就是旋轉必定角度了。code

示例：orm

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="800" height="180" style="border:1px solid #000">
        <text x="20" y="20" stroke="none" fill="black">
            網絡教育是當今國際國內教育發展的熱點，也是現代教育技術的主流發展方向之一。在傳統的教學中，
            <tspan x="20" y="45" rotate="12 34 45 12 34 56 90 190 349 120 128">
                大多數狀況下，知識是老師灌輸的，學生只是被動接收。而在網絡教育中，學習採用互動方式，
            </tspan>
            <tspan x="20" y="70" dy="1 3 5 6 7 8 2 2 5 2 6 ">
                從某種程度上說，學生既是一個接收者，也是一個參與教育的主體。這種交互式的教育，更有助於學
            </tspan>
            <tspan x="20" y="145"  dx="1 2 4 5 1 3 4 7 9 10">
                生知識的得到、能力的培養，有助於更主動地去思考。
            </tspan>
        </text>
    </svg>
</body>
</html>

效果以下：

第一行是正常狀況下的，沒有任何屬性的，第二行是添加了rotate屬性的（值的單位是度），第三行是添加了dy屬性的，第四行是添加了dx屬性的，這些屬性均可以指定多個值，之間用空格和逗號之間隔開，這些值會依次應用在字符上。

有時候咱們可能會想讓一段文字佔用固定的長度，這時候咱們能夠用textLength屬性和textAdjust屬性來實現，textLength屬性即爲文字佔用的長度，textAdjust用來指定調整字符大小的方式，指定爲spacing（默認值）時是調整字符間空隙的大小，指定爲spacingAndGlyphs是調整字符大小和字符間空隙的大小，示例：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="100" style="border:1px solid #000;">
        <text x="10" y="10" stroke="none" textLength="200">
            two words
        </text>
        <text x="10" y="30" stroke="none" textLength="200" lengthAdjust="spacingAndGlyphs">
            two words
        </text>
        <text x="10" y="50" stroke="none" textLength="50">
            two words
        </text>
        <text x="10" y="70" stroke="none" textLength="50" lengthAdjust="spacingAndGlyphs">
            two words
        </text>
    </svg>
</body>
</html>

效果：

這樣可能看不清，來張放大的

這就一目瞭然了吧O(∩_∩)O哈哈~

有時候咱們並不想讓文字橫向排列，咱們可能想讓文字旋轉必定的角度，甚至豎直排列，固然咱們能夠使用transform的rotate實現，可是讓文字豎直排列還有一個方法，就是設置writing-mode屬性爲tb（top to bottom）,若是想讓文本在豎直排列的時候，單個字符仍然橫向顯示，能夠經過設置glyph-orientation-vertical的值爲0實現，默認90。示例以下：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <text x="10" y="10" writing-mode="tb">
            這是一段文本文字
        </text>
        <text x="30" y="10" transform="rotate(90 30 10)">
            這是一段文本文字
        </text>
        <text x="70" y="10" writing-mode="tb">
            this is a paragraph
        </text>
        <text x="90" y="10" writing-mode="tb" glyph-orientation-vertical="0" >
            this is a paragraph
        </text>
    </svg>
</body>
</html>

效果以下：

可是最後一個有問題，我已經設置了glyph-orientation-vertical爲0，可是字母並無翻轉過來，至於緣由，我也不知道爲何╮(╯▽╰)╭╮(╯▽╰)╭

關於國際化的<switch>，用的很少，就很少說了，用的時候查一下就就好了(～￣▽￣)～

我想我不是個乖孩子，從小就不是，我爸媽在我小時候給我定了一堆規矩，不許動這個，不許玩這個，上學了老師說，上課不許睡覺不許吃東西不許大聲說話云云~~~可是我歷來就沒當回事，也就當時聽了一下，玩的時候早忘腦後了————————svg中的文本一直就是一條直線，你難道就不想破壞一下這個規矩嗎（不知道你想不想，反正我是個歷來不遵照規定的人(￣_,￣ )），svg中使用路徑來給文本建立軌跡，使用的時候只須要在<text>元素中嵌套子元素<textPath>，並使用<textPath>元素的xlink:href屬性引用聲明好的路徑就行，看示例：

<!DOCTYPE html>
<html>
<head>
    <title>SVG</title>
</head>
<body>
    <svg width="300" height="300" style="border:1px solid #000">
        <defs>
            <path id="p1" class="st0" d="M30.6,115.9c22.8-15.2,40.6-10.7,41.1,24.9S0.2,229.6,46.4,261.1s58.4,31,89.3,7.6
            S108.4,226,150,193.5s61.9,71.6,92.8,34.5s54.3-79.7,19.8-111.7s-55.8-53.3-100.5-45.7S98.2,59.5,88,37.2s-69-8.6-69-8.6"/>
        </defs>
        <use xlink:href="#p1" stroke="black" fill="none"></use>
        <text>
            <textPath xlink:href="#p1">
                這是一個測試的字符段，用來測試帶有路徑的文本,這行字僅僅是用來測試的，看一下就就好了，千萬別仔細看，不過你已經看到這了，就看完吧，反正就要結束了
            </textPath>
        </text>
    </svg>
</body>
</html>