久久久久久久av_日韩在线中文_看一级毛片视频_日本精品二区_成人深夜福利视频_武道仙尊动漫在线观看

SVG基礎 | SVG TSPAN 元素

html5教程 html5模板網
上一篇文章中我們介紹了如何繪制SVG文本，那么如何繪制多行文本呢？SVG的tspan元素用于繪制SVG多行文本。我們不必每行文本都使用絕對定位來排列制作多行文本，使用tspan元素可以非常
1.jpg

　　上一篇文章中我們介紹了如何繪制SVG文本，那么如何繪制多行文本呢?SVG 的<tspan>元素用于繪制SVG多行文本。我們不必每行文本都使用絕對定位來排列制作多行文本，使用<tspan>元素可以非常方便的使一行文本相對于另一行文本來定位。使用<tspan>元素還可以使用戶在同一時間里選擇和復制多行文字。

　　TSPAN示例
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="10">
  3.       <tspan>tspan line 1</tspan>
  4.       <tspan>tspan line 2</tspan>
  5.   </text>
  6. </svg>  
復制代碼

　　下面是上面代碼的返回結果：
2.jpg
　　注意上面的返回結果中，由于<tspan>元素沒有設置其它參數，默認情況下第二行文字會緊跟著第一行文字排列。

　　垂直定位

　　如果你希望每一行文字都相對于前一行文字垂直定位，你可以在元素中使用dy屬性(delta y)：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="10">
  3.       <tspan>tspan line 1</tspan>
  4.       <tspan dy="10">tspan line 2</tspan>
  5.   </text>
  6. </svg>     
復制代碼

　　現在第二行文字會顯示在第一行文字下方，距離為10像素。下面是上面代碼的返回結果：
3.jpg
　　如果你希望<tspan>元素在text中在垂直方向絕對定位某個指定的數值，可以設置<text>元素的y屬性。

　　如果你在<ty>屬性中寫了多個數字，那么每一個數字會被應用到<tspan>元素的每一個字符上。看下面的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <tspan dy="5 10 20">123</tspan>
  3. </svg>
復制代碼

　　下面是返回結果，注意各個字符在垂直方向上的變化。
4.jpg
　　水平定位

　　要使每一行文本在X軸方向上相對定位可以使用dx屬性(delta x)。下面的例子展示了將dx的值設置為30的效果，現在第二行文字在水平方向上相對于第一行文字向右偏移了30像素。
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="10">
  3.       <tspan>tspan line 1</tspan>
  4.       <tspan dx="30" dy="10">tspan line 2</tspan>
  5.   </text>
  6. </svg>      
復制代碼
5.jpg
　　如果你在<dx>屬性中寫了多個數字，那么每一個數字會被應用到<tspan>元素的每一個字符上。看下面的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <tspan dx="5 10 20">123</tspan>
  3. </svg>  
復制代碼

　　下面是返回結果，注意各個字符在水平方向上的變化。
6.jpg
　　你可以在<tspan>元素設置x屬性來修正<text>元素的X坐標。使用這種方法你可以顯示多行頭部對齊的文字。來看下面的例子，x屬性設置為10：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text y="10">
  3.       <tspan x="10">tspan line 1</tspan>
  4.       <tspan x="10" dy="15">tspan line 2</tspan>
  5.       <tspan x="10" dy="15">tspan line 3</tspan>
  6.   </text>
  7. </svg>      
復制代碼

　　下面是上面代碼的返回結果：
7.jpg
　　為TSPAN元素添加樣式

　　我們可以為<tspan>元素添加樣式，例如你可以將一個<tspan>元素中的文字設置為加粗字體：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text y="10">
  3.     這是一個被 <tspan style="font-weight: bold;">加粗</tspan> 的文字。
  4.   </text>
  5. </svg>     
復制代碼

　　下面是上面代碼的返回結果：
8.jpg
　　通過BASELINE-SHIFT設置上標和下標效果

　　你可以通過baseline-shift CSS屬性將一個<tspan>元素設置為上標或下標。看下面的例子：
  1. <text x="10" y="20">
  2.     這是一個tspan元素的 <tspan style="baseline-shift: super;">上標</tspan>
  3.     和 <tspan style="baseline-shift: sub;">下標</tspan> 混合的文本串效果。
  4. </text>      
復制代碼

　　效果如下：
9.jpg
　　本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506091997.html

【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 国产精品99久久久久久宅男 | 国外成人免费视频 | 一级毛片视频在线观看 | 久久久久国产一级毛片 | 亚洲综合在线视频 | 国产午夜精品一区二区 | 日韩久久久久久 | 欧美精品一区二区三区在线播放 | 成人h免费观看视频 | 国产精品2区 | 亚洲欧美中文字幕在线观看 | 99国产精品一区二区三区 | 久久性色| 中文字幕高清一区 | 日日爽| 狠狠入ady亚洲精品经典电影 | 国产成人免费视频网站高清观看视频 | 午夜男人免费视频 | 天天躁日日躁狠狠躁白人 | 欧美一级片在线观看 | 亚洲国产精品一区 | 欧美日韩在线视频观看 | 欧美在线观看黄色 | 国产人成精品一区二区三 | 欧洲色综合 | 九九综合| 91精品一区二区三区久久久久 | 欧美在线小视频 | 日韩免费三级 | www.久| 中文一区二区 | 成人免费观看男女羞羞视频 | 亚洲一区二区三区桃乃木香奈 | 99re视频这里只有精品 | av天空| 综合色播 | 国产网站在线免费观看 | 亚洲一级av毛片 | 伊人春色成人 | 欧美成人精品 | 日韩一区二区三区av |