pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

SVG基礎 | 繪制SVG文字

html5教程 html5模板網
本文介紹如何繪制SVG文字，以及SVG文字的各種屬性和注意事項。我們可以使用SVG的text元素來在SVG圖像上繪制文字。，HTML5中國，中國最大的HTML5中文門戶。
1.jpg

　　我們可以使用SVG 的<text>元素來在SVG圖像上繪制文字。下面是一個簡單的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="40">這里是SVG文字</text>
  3. </svg>   
復制代碼

　　這個例子中定義一個位于x=20，y=40位置的文本。文字顯示為“這里是SVG文字”。下面是它的返回結果：
QQ截圖20150731095924.jpg　　
　　文字的定義
　　在深入了解SVG文字之前，先來看看下面的三個定義：

  • 　　Glyphs：Glyphs是字母或符號的視覺表現。例如，因為字母“a”有多種不同的視覺表現方式，所以可以使用不同的Glyphs來繪制它。
  • 　　Fonts：Fonts代表字體，它是glyphs的集合，可以用于表現一組字母或符號。
  • 　　Characters：Characters是代表一個字母或符號的二進制數字。一個character可以使用1個或多個字節來表示。一個characters在被計算機渲染的時候，會將它映射為字體中的一個符號。

　　文字的位置
　　SVG文字的位置有<svg>元素的x和y屬性來決定。x屬性決定文字的左邊部位置(文字的開始位置)，y屬性決定文字的下邊部位置(注意這里不是上邊部)。文字的y屬性定位不同于其它SVG元素，如直線，矩形和其它圖形。下面的例子顯示了一串文字和一條直線，它們的y屬性都是40：
2.jpg
　　注意觀察，文字的y屬性位于文字的下邊，而不是上邊。

　　TEXT ANCHOR

　　文字的anchor決定哪個部分的文字放置在text元素中的x屬性定義的位置。默認的anchor是文字左邊部，即文字的開始處。你也可以將anchor設置為middle，使它位于文字的中間，設置為end，使它位于文字的右邊。

　　要設置文字的anchor，可以使用CSS的text-anchor屬性。該屬性的取值為：start、middle和end。下面的例子展示了設置不同的text-anchor值時文字的位置。
3.jpg
　　垂直的直線是三串文本的x位置。它們都位于x="50"的位置上。你可以觀察不同的取值時文字的不同定位方式。

　　上效果的代碼如下：
  1. <text x="50" y="20"
  2.       style="text-anchor: start">
  3.     Start
  4. </text>
  5. <text x="50" y="40"
  6.       style="text-anchor: middle">
  7.     Middle
  8. </text>
  9. <text x="50" y="60"
  10.       style="text-anchor: end">
  11.     End
  12. </text>            
復制代碼

　　文字的描邊和填充

　　和其它SVG圖形一樣，SVG文字也可以進行描邊和填充操作。如果你只指定了文字的描邊屬性，文字將會渲染為一個文字輪廓。如果你只指定了文字的填充屬性，那么文字看起來和平常是一樣的。來看看下面的三種文字描邊和填充的效果：


4.jpg

　　你也可以使用stroke-width屬性為文字的描邊設置寬度。下面的例子將文字的描邊寬度設置為2：

5.jpg
　　SVG文字的間距和字距調整

　　我們可以使用letter-spacing和kerning屬性來控制文字的間距和字距調整(兩個glyphs之間的距離)。下面是一個簡單的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20"  y="20" >Example SVG text</text>
  3.   <text x="20"  y="40" style="kerning:2;">Example SVG text</text>
  4.   <text x="20"  y="60" style="letter-spacing:2;">Example SVG text</text>
  5. </svg>     
復制代碼

　　下面是上面代碼的返回結果：
6.jpg
　　上面的letter-spacing和kerning使用的是正數值，如果你使用負數值，那么字距將會收縮。

　　單詞間距

　　你可以使用word-spacing CSS屬性來指定單詞的間距。單詞的間距是指單詞之間的空白符的數量。看下面的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.   <text x="20" y="20">
  3.     Word spacing is normal
  4.   </text>
  5.   <text x="20" y="40"
  6.         style="word-spacing: 4;">
  7.       Word spacing is 4
  8.   </text>
  9.   <text x="20" y="60"
  10.         style="word-spacing: 8;">
  11.       Word spacing is 8
  12.   </text>
  13. </svg>        
復制代碼

　　下面是返回的結果。注意：Firefox瀏覽器有可能不支持這個word-spacing屬性。
7.jpg
　　word-spacing的值也可以設置為負數，這時單詞的間距將會被壓縮。

　　文字布局-SVG文字沒有自動換行功能

　　SVG文字是沒有自動換行功能的。你必須自己定位每一行文本。需要制作多行文本的話，元素可能會有所幫助，我們將在后面的文章中講解這個元素。

　　你還可以將文字放置在一條路徑上，例如一個圓或一條曲線上。達到這種效果你需要使用元素。

　　旋轉文本

　　你可以像旋轉其它SVG圖形一樣旋轉SVG文字。旋轉SVG文字需要使用SVG transform屬性。
  1. <svg xmlns="http://www.w3.org/2000/svg">  
  2.   <text x="20"  y="40"
  3.           transform="rotate(30 20,40)"
  4.           style="stroke:none; fill:#000000;"
  5.           >Rotated SVG text</text>
  6. </svg>      
復制代碼

　　上面代碼的返回結果是：
8.jpg
　　關于SVG的transform屬性，后面會有文字詳細講解。

　　垂直文字

　　你可以使用旋轉的方法來制作垂直的SVG文字，但是還有一種簡單的方法來顯示垂直文字。那就是使用writing-mode屬性，將它的值設置為tb(Top to Bottom)。Firefox22以下的版本不支持這個屬性。看下面的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">  
  2.   <text x="10" y="20" style="writing-mode: tb;">
  3.     垂直文字
  4.   </text>
  5. </svg>      
復制代碼

　　上面的代碼的返回結果是：
9.jpg
　　我們在來看看英文的情況：
  1. <svg xmlns="http://www.w3.org/2000/svg">  
  2.   <text x="10" y="20" style="writing-mode: tb;">
  3.     Vertical
  4.   </text>
  5. </svg>   
復制代碼
10.jpg
　　你會發現如果是英文的話，字母也被旋轉了90度。如果你需要每個字母都不被旋轉，可以設置glyph-orientation-vertical CSS屬性值為0。這個屬性值用于旋轉glyphs。默認值它的值為90度。看下面的例子：
  1. <text x="10" y="10" style="writing-mode: tb; glyph-orientation-vertical: 0;">
  2.     Vertical
  3. </text>
  4. <text x="110" y="10" style="writing-mode: tb; glyph-orientation-vertical: 90;">
  5.     Vertical
  6. </text>      
復制代碼

　　上面的代碼的返回結果是：
11.jpg
　　文字的方向

　　你可以使用direction CSSS屬性來設置文字的渲染方向。direction屬性有兩個取值：ltr和rtl。分別是“從左向右”和“從右向左”的意思。另外，在渲染英文的時候，如果需要字母也從右向左渲染，需要設置unicode-bidi: bidi-override;。看下面的例子：
  1. <text x="130" y="40" style="direction: rtl;">從右向左顯示</text>
  2. <text x="130" y="80" style="direction: rtl; unicode-bidi: bidi-override;">right to Left</text>
復制代碼
12.jpg
　　SVG文字樣式

　　下面列出了一組可以使用在SVG文字上的CSS屬性。你還可以為文字的描邊和填充設置漸變，填充模式和遮罩等效果。

　　注意，下面的CSS屬性名稱必須是小寫，否則渲染時會被忽略!

屬性 描述
font-family 設置字體
font-size 設置文字大小
kerning 設置字距調整的值
letter-spacing 字母之間的間距
word-spacing 單詞之間的間距
text-decoration 是否帶下劃線。可選值有：none、underline、overline和line-through
stroke 文字的描邊顏色。默認文字只有填充色，沒有描邊，添加描邊將使文字變粗
stroke-width 文字描邊的寬度
fill 文字的填充色

　　下面是一個使用了上面的一些屬性的例子：
  1. <svg xmlns="http://www.w3.org/2000/svg">
  2.     <text x="20"  y="40"
  3.           style="font-family: Arial;
  4.                  font-size  : 34;
  5.                  stroke     : #000000;
  6.                  fill       : #00ff00;
  7.                 "
  8.           >Styled SVG text</text>
  9. </svg>     
復制代碼

　　上面的代碼的返回結果是：
13.jpg
　　文字的長度

　　你可以使用textLength屬性來設置文字的長度。文字的長度可以用來調整字符(characters)之間的距離來適應指定的長度。同時也會調整符號(glyphs)的寬度。使用lengthAdjust屬性你可以指定是否同時調整字符間距和符號的寬度。看下面的例子：
  1. <text x="5" y="20" textLength="140" lengthAdjust="spacing">
  2.   A long, long, long text.
  3. </text>
  4. <text x="5" y="40" textLength="200" lengthAdjust="spacing">
  5.     A long, long, long text.
  6. </text>
  7. <text x="5" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">
  8.     A long, long, long text.
  9. </text>  
復制代碼

　　上面的代碼的返回結果如下。注意最后兩串文字的間距和字符大小：
14.jpg
　　本文版權屬于jQuery之家，轉載請注明出處：http://www.htmleaf.com/ziliaoku/ ... g/201506071990.html


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

相關文檔推薦

由于實際運行環境是在瀏覽器中，因此性能還取決于JavaScript解釋器的效率，指定的FPS幀速在低性能解釋器中可能不會達到，所以這部分不是開發者能夠決定的，開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器，需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。，HTML5中國，中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富，HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端，他們覬覦移動原生應用人性化的操作體驗，特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品，或者是一個作品集，又或者僅僅只是一個靈感。在你發布到網上之前，你想讓它看起來有吸引力，專業，或者至少得看起來像那么回事。那么你接下
H5廣告，包括H5廣告的設計流程，究竟有什么講究，和階段。為了能幫助更多的人了解H5廣告，我專門做了一個講義。同時，也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有：框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板： 一礼通 (www.yilitong.com)-企业礼品解决方案一站式服务平台 | 液压油缸-液压缸厂家价格,液压站系统-山东国立液压制造有限公司 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 上海公众号开发-公众号代运营公司-做公众号的公司企业服务商-咏熠软件 | 英语词典_成语词典_日语词典_法语词典_在线词典网 | 武汉刮刮奖_刮刮卡印刷厂_为企业提供门票印刷_武汉合格证印刷_现金劵代金券印刷制作 - 武汉泽雅印刷有限公司 | 洗瓶机厂家-酒瓶玻璃瓶冲瓶机-瓶子烘干机-封口旋盖压盖打塞机_青州惠联灌装机械 | 上海办公室装修,写字楼装修—启鸣装饰设计工程有限公司 | 光环国际-新三板公司_股票代码：838504 | 废旧物资回收公司_广州废旧设备回收_报废设备物资回收-益美工厂设备回收公司 | 雷蒙磨,雷蒙磨粉机,雷蒙磨机 - 巩义市大峪沟高峰机械厂 | UV-1800紫外光度计-紫外可见光度计厂家-翱艺仪器（上海）有限公司 | 江苏密集柜_电动_手动_移动_盛隆柜业江苏档案密集柜厂家 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库 | 超声波清洗机_超声波清洗机设备_超声波清洗机厂家_鼎泰恒胜 | 电采暖锅炉_超低温空气源热泵_空气源热水器-鑫鲁禹电锅炉空气能热泵厂家 | 双齿辊破碎机-大型狼牙破碎机视频-对辊破碎机价格/型号图片-金联机械设备生产厂家 | 电动葫芦|防爆钢丝绳电动葫芦|手拉葫芦-保定大力起重葫芦有限公司 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 【甲方装饰】合肥工装公司-合肥装修设计公司,专业从事安徽办公室、店面、售楼部、餐饮店、厂房装修设计服务 | 一礼通 (www.yilitong.com)-企业礼品解决方案一站式服务平台 | 【同风运车官网】一站式汽车托运服务平台,验车满意再付款 | 定做大型恒温循环水浴槽-工业用不锈钢恒温水箱-大容量低温恒温水槽-常州精达仪器 | 小型数控车床-数控车床厂家-双头数控车床| 中控室大屏幕-上海亿基自动化控制系统工程有限公司 | 生产自动包装秤_颗粒包装秤_肥料包装秤等包装机械-郑州鑫晟重工科技有限公司 | 旅游规划_旅游策划_乡村旅游规划_景区规划设计_旅游规划设计公司-北京绿道联合旅游规划设计有限公司 | 真空泵厂家_真空泵机组_水环泵_旋片泵_罗茨泵_耐腐蚀防爆_中德制泵 | 数控走心机-走心机价格-双主轴走心机-宝宇百科| 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 螺杆式冷水机-低温冷水机厂家-冷冻机-风冷式-水冷式冷水机-上海祝松机械有限公司 | 京港视通报道-质量走进大江南北-京港视通传媒[北京]有限公司 | 德国UST优斯特氢气检漏仪-德国舒赐乙烷检测仪-北京泽钏 | 刮板输送机,粉尘加湿搅拌机,螺旋输送机,布袋除尘器 | 液压油缸生产厂家-山东液压站-济南捷兴液压机电设备有限公司 | 合肥展厅设计-安徽展台设计-合肥展览公司-安徽奥美展览工程有限公司 | 广州网站建设_小程序开发_番禺网站建设_佛山网站建设_粤联网络 | 北京中创汇安科贸有限公司 | 澳威全屋定制官网|极简衣柜十大品牌|衣柜加盟代理|全屋定制招商 百度爱采购运营研究社社群-店铺托管-爱采购代运营-良言多米网络公司 | 防水套管_柔性防水套管_刚性防水套管-巩义市润达管道设备制造有限公司 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 山东彩钢板房,山东彩钢活动房,临沂彩钢房-临沂市贵通钢结构工程有限公司 |