二、svg文字之排版

最新推荐文章于 2024-12-10 22:30:08 发布

0914_h

最新推荐文章于 2024-12-10 22:30:08 发布

阅读量9.9k

点赞数 5

分类专栏： Internet of things 文章标签： svg

本文链接：https://blog.csdn.net/huanhuanq1209/article/details/71438629

版权

Internet of things 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1、transform="rotate(90,80,80)的使用

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500" >
  <text x="10" y="20" style="fill:red;" transform="rotate(90,80,80)">Several lines: 
    <tspan x="10" y="45">First line</tspan> 
    <tspan x="10" y="70">Second line</tspan> 
  </text>
</svg>
 
</body>
</html>

运行结果为：

2、tspan的dx和dy的使用

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="100" y="100" dy="100" fill="black" style="font-size:40px;">
          <tspan fill="blue" dx="0 -40"dy="-50 40">我是</tspan>
		 <tspan fill="red">中国人</tspan>
     </text>
     <path d="M100,0 V200 M0,100 H200" stroke="red"/>
</svg>

</body>
</html>

运行结果为：

3、文本行垂直排列：

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="200" y="50" dominant-baseline="start" fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="100" dominant-baseline="middle"  fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="150" dominant-baseline="end" fill="black" style="font-size:40px;">我是中国人</text>
     <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>
</body>
</html>

运行结果为：

4、文本水平排列：

text-anchor属性可设置文本水平排列，有三个取值 start | middle | end。

<!DOCTYPE html>
<html>
<body>

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
     <text x="200" y="50" text-anchor="start" fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="100" text-anchor="middle"  fill="black" style="font-size:40px;">我是中国人</text>
     <text x="200" y="150" text-anchor="end" fill="black" style="font-size:40px;">我是中国人</text>
     <path d="M200,0 V200 M0,100 H400" stroke="red"/>
</svg>
</body>
</html>

运行结果为：

<!DOCTYPE html>
<html>
<body>
<svg>
	<g style="font-size: 14pt;">
    <path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
    <text x="100" y="30" >Start</text>
    <text x="100" y="60" >Middle</text>
    <text x="100" y="90" >End</text>
</g>
 </svg>
</body>
</html>

运行结果为：

代码：

<!DOCTYPE html>
<html>
<body>
<svg>
	<g style="font-size: 14pt;">
    <path d="M 100 10 100 100" style="stroke: gray; fill: none;"/>
    <text x="100" y="30" style="text-anchor: start">Start</text>
    <text x="100" y="60" style="text-anchor: middle">Middle</text>
    <text x="100" y="90" style="text-anchor: end">End</text>
</g>
 </svg>
</body>
</html>

运行结果：

其中text中的y代表字的长度；

对齐

默认<text>从起始位置(x,y)开始展示。但由于在svg中无法事先知道<text>的长度，所以无法仅通过改变(x,y)让<text>的中轴或结束位置位于指定位置。

但svg提供了一种更简单直接的方法实现这些对齐方式。

text-anchor属性可以改变(x,y)作为起始坐标的定义。

text-anchor="start"时，(x,y)为<text>的起始坐标。

text-anchor="middle"时，(x,y)为<text>的中轴坐标。

text-anchor="end"时，(x,y)为<text>的结束坐标。

5、一条二次贝兹曲线路径文字的实例：

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
     
	<text dx="20 30 40 50 60" fill="black" style="font-size:40px;">
		<textPath xlink:href="#p1">我是中国人</textPath>
	</text>
        <path id="p1" d="M100,200 Q200 100 300 200 T 500 200" stroke="green" fill="none"/>
</svg>
</body>
</html>

运行结果为：

6、垂直路径文字的实例：

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">
     
	<text dx="20 20 20 20 20" fill="black" style="font-size:40px;">
	<textPath xlink:href="#p1">我是中国人</textPath>
	</text>
     <path id="p1" d="M50,50 V500" stroke="green" fill="none"/>
</svg>
</body>
</html>

运算结果：

7、svg沿路径绘制文本

<!DOCTYPE html>
<html>
<body>
<svg width="100%" height="100%" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <defs>
          <path id="circlePath"
            d="M10,50
               C10,50 50,0 100,50
               C100,50 150,100 190,50
               M10,150
               C10,150 50,100 100,150
               C100,150 150,200 190,150" />
    </defs>
    <g fill="dodgerblue" font-size="15" font-family="楷体">
        <text x="20" y="40">
            <textPath xlink:href="#circlePath">
                SVG与文本：使用textPath进行字符串的显示
            </textPath>
        </text>
    </g>
    <use xlink:href="#circlePath" fill="none" stroke="blue" />
</svg>
</body>
</html>

运行结果为：

<!DOCTYPE html>
<html>
<body>
<svg>
	<g id="coordinates" fill="none" stroke="black" stroke-width="1">
    <path d="M10 0 v30 h200 m-190 0 v30 h190 m-180 0 v30 h180"></path>
	</g>
	<g id="text" font-size="2rem">
    	<text x="10" y="30">first line
       	 	<tspan x="20" y="60">second line</tspan>
        	<tspan x="30" dy="30">third line</tspan>
    	</text>
	</g>
 </svg>
</body>
</html>

8、

<!DOCTYPE html>
<html>
<body>
<svg width="660" height="220" style="outline: 1px solid red; font-size: 2em; overflow: visible;"> 
	<text textLength="400" lengthAdjust="spacingAndGlyphs"> 
		<tspan x="280" y="80">S</tspan> 
		<tspan x="280"dy="30" fill="red">S</tspan> 
	</text> 
</svg>
</body>
</html>

运行结果为：

我把两个tspan上下放置，给第二个tspan加一个红色填充。我还给<text>元素添加了textLength和lengthAdjust属性。然而，文本没有拉伸。

但是，给第一个tspan添加了这两个属性之后，它确实拉伸了间隔、还有字形。

他们和rotate属性不一样，给text元素设置的textLength和lengthAdjust，不会扩散到tspan。

这是一个例外，我发现如果你给text元素添加textLength和lengthAdjust属性，然后没有给第一个tspan设置x和y的值，那么textLength和lengthAdjust也有可能会被继承。

9、

<!DOCTYPE html>
<html>
<body>
<svg>
	<g id="coordinates" stroke="black" stroke-width="1">
   	 	<path d="M10 0 v90 m0 -60 h200 m-200 30 h200 m-200 30 h200"></path>
	</g>
	<g id="text">
		<text x="10" y="30">First Line</text>
   		<text x="10" y="60" stroke="black">Second Line</text>
    	<text x="10" y="90" stroke="blue" fill="none" stroke-width=".5">Third Line</text>
	</g>
 </svg>
</body>
</html>

运行结果：

分析：

10、利用dx和dy，rotate来排版文字

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
	<text x="30" y="30" font-size="2rem" >
    It’s
    <tspan dx="0 4 -3 5 -4 6" dy="0 -3 7 3 -2 -8"
           rotate="5 10 -5 -20 0 15">shaken</tspan>,
    not stirred.
</text>
 </svg>
</body>
</html>

"shaken"一共六个字符，dx,dy,rotate分别各有六个数值，空格或逗号隔开，每个数值对相作用于应次序的字母。rotate可以对字符做旋转。如果dx（或者dy,rotate）参数个数小于<tspan>内的字符个数，最后一个dx(dy,rotate)参数值将作用于多出的字符。

另外，上标下标除了可以用dy来抬高或降低字符位置，还有一个baseline-shift样式可以直接定义上标下标

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
	<text x="20" y="25" style="font-size: 1.5rem;">
    C<tspan style="baseline-shift: sub;font-size: 1rem;">12</tspan>
    H<tspan style="baseline-shift: sub;font-size: 1rem">22</tspan>
    O<tspan style="baseline-shift: sub;font-size: 1rem">11</tspan> (sugar)
</text>
<text x="20" y="70" style="font-size: 1.5rem;">
    6.02 x 10<tspan baseline-shift="super" style="font-size:1rem">23</tspan>
    (Avogadro's number)
</text>

 </svg>
</body>
</html>

12、设置text长度及字符间隔

默认情况下无从获得<text>的长度，但可以通过textlength属性设置<text>长度。<text>内部字符会根据textLength自适应变化。通过lengthAdjust属性来设置字符变化规则。lengthAdjust有两个可选属性值。

spacing
spacingAndGlyphs
spacing只调整字符之间的间隔；spacingAndGlyphs则会根据一定比例同时调整字符之间的间隔，以及字符本身宽度。

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
	<g style="font-size: 1.3rem;">
    <path d="M 20 10 20 70 M 220 10 220 70" style="stroke: gray;"></path>
    <text x="20" y="30" textLength="200" lengthAdjust="spacing">Two words</text>
    <text x="20" y="60" textLength="200" lengthAdjust="spacingAndGlyphs">Two words</text>
    	<text x="20" y="90">Two words
        <tspan style="font-size: 10pt;">(normal length)</tspan>
    	</text>
    	<path d="M 20 100 20 170 M 90 100 90 170" style="stroke: gray;"></path>
    	<text x="20" y="120" textLength="70" lengthAdjust="spacing">Two words</text>
   	 	<text x="20" y="160" textLength="70" lengthAdjust="spacingAndGlyphs">Two words</text>
	</g>
 </svg>
</body>
</html>

13、垂直text

有两种方法实现垂直显示text。一种使用transform，一种是text特有的writing-mode：tb(top to bottom)样式。
书上用writing-mode + glyph-orientation-vertical的实现方式在chrome上没生效。
个人认为使用transform（或者writing-mode:tb）+ rotate + letter-spacing实现起来更为灵活。

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" style="font-size: 1.3rem;">

   <text x="50" y="20" style="writing-mode: tb;letter-spacing:5px" rotate="-90" >
	 i am huanhuan.
	</text>
   <text x="70" y="20" transform="rotate(90, 70, 20)" style="letter-spacing:10px" rotate="-90" >
	   我是欢欢
	</text>
	
 </svg>
</body>
</html>

运行结果为：

疑惑：rotate是怎么实现旋转的。比如：

 <rect x="30" y="30" width="120" height="90" rx="10" ry="10" fill="#a0b3d6" transform="rotate(45, 90 75) rotate(-45)"></rect>

14、textPath

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" style="font-size: 1.3rem;">

   <defs>
   		 <path id="circle" d="M70 20 a40 40 0 1 1 -1 0"></path>
	</defs>
	<text>
		<textPath xlink:href="#circle">
      	  	Text following a circle.............
  		 </textPath>
	</text>
	
 </svg>
</body>
</html>

超出<path>长度部分的文字将被隐藏。

默认的，<textPath>的起始位置为<path>的起始位置。
<textPath>元素还有一个startOffset属性，可以调整<text>起始位置。startOffset为百分数时，<textPath>起始位置 = startOffset * <path>总长度。startOffset为具体数字时，<textPath>起始位置 = startOffset + <path>的起始位置。
利用startOffset和text-anchor，可以实现文字居中摆放。

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500" style="font-size: 1.3rem;">
   <defs>
    <path id="semi" d="M110 100 a50 50 0 1 1 100 0"></path>
  </defs>
   <use xlink:href="#semi" stroke="grey" fill="none"></use>
   <text text-anchor="middle">
        <textPath xlink:href="#semi" startOffset="50%">
            Middle
        </textPath>
   </text>
 </svg>
</body>
</html>

相关参考链接：https://segmentfault.com/a/1190000009293590

15、

<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg width="500" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg">            
	<rect width="300" height="100" style="fill:red;"/>            
	<circle cx="150" cy="100" r="80" style="fill:green;"/>            
	<text x="100" y="125" font-size="60" style="fill:white">SVG</text>        
</svg>
</body>
</html>

16、文言文书写

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"width="1000" height="1000">
  <defs >
	   <path id="p1" d="M0,0 V500 M20,0 V500" stroke="green" fill="none"/>  
  </defs>
	<rect width="500" height="500" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" />
<g fill="dodgerblue" font-size="15" font-family="楷体"  >  
        <text x="0" y="40" transform="rotate(90, 0, 40)" style="letter-spacing:10px" rotate="-90" >  
     		 SVG与文本：使用textPath进行字符串的显示 
        </text>  
		<text x="20" y="40" transform="rotate(90, 20, 40)" style="letter-spacing:10px" rotate="-90" >  
     		 SVG与文本：使用textPath进行字符串的显示 
        </text>  
		
 </g>  
<use xlink:href="#p1" fill="none" stroke="blue" />  
	
</svg>
 
</body>
</html>

完整的文言文书写实例：

<!DOCTYPE html>  
<html>  
<body>    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"width="1000" height="1000">  
  <defs >  
       <path id="p1" d="M0,0 V500 M20,0 V500 M40,0,V500 M60,0 V500 M80,0 V500" stroke="green" fill="none"/>    
  </defs>  
  <rect width="500" height="500" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" />  
<g  fill="dodgerblue" font-size="15" font-family="楷体"  >    
        <text x="0" y="20" transform="rotate(90, 0, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
        </text>    
        <text x="20" y="20" transform="rotate(90, 20, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
        </text> 
	   <text x="40" y="20" transform="rotate(90, 40, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
       </text>    
	   <text x="480" y="20" transform="rotate(90, 480, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
       </text>        
 </g>    
<use xlink:href="#p1"  fill="none" stroke="blue" x="0" y="0" />    
<use xlink:href="#p1"  fill="none" stroke="blue" x="100" y="0"/> 
<use xlink:href="#p1"  fill="none" stroke="blue" x="200" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="300" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="400" y="0"/>
</svg>    
</body>  
</html>

运行结果为：

优化：

<!DOCTYPE html>  
<html>  
<body>    
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"width="1000" height="1000">  
  <rect width="500" height="500" style="fill:white;stroke-width:1;stroke:rgb(0,0,0)" /> 
	<defs >  
	<g id="p1"  fill="dodgerblue"font-size="10" font-family="楷体"  >    
        <path  d="M0,0 V500 M20,0 V500 M40,0,V500 M60,0 V500 M80,0 V500" stroke="green" fill="none"/>    
		<text x="0" y="20" transform="rotate(90, 0, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
        </text>    
        <text x="20" y="20" transform="rotate(90, 20, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
        </text> 
	   <text x="40" y="20" transform="rotate(90, 40, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
       </text> 
		<text x="60" y="20" transform="rotate(90, 60, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
       </text>  
	   <text x="80" y="20" transform="rotate(90, 80, 20)" style="letter-spacing:10px" rotate="-90" >    
             SVG与文本：使用textPath进行字符串的显示   
       </text>        
 	</g> 
</defs>  
<use xlink:href="#p1"  fill="none" stroke="blue" x="0" y="0" />    
<use xlink:href="#p1"  fill="none" stroke="blue" x="100" y="0"/> 
<use xlink:href="#p1"  fill="none" stroke="blue" x="200" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="300" y="0"/>
<use xlink:href="#p1"  fill="none" stroke="blue" x="400" y="0"/>
</svg>    
</body>  
</html>

最终的结果：图片与文字的混合

<!DOCTYPE html>
<html>
<body>
	<svg width="1000 height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg"  viewBox="0,0,500,500"> 
  
	<image x="0"  y="0"  width="500" height="500" href="page_bg.jpg" preserveAspectRatio= "xMinYMin slice"></image>
	
	<rect width="500" height="500" style="fill:none;stroke-width:1;stroke:rgb(0,0,0)" />   	
	<defs >    
    <g id="p1"  fill="dodgerblue"font-size="10" font-family="楷体"  >      
        <path  d="M0,0 V500 M20,0 V500 M40,0,V500 M60,0 V500 M80,0 V500" stroke="green" fill="none"/>      
        <text x="0" y="20" transform="rotate(90, 0, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG与文本：使用textPath进行字符串的显示     
        </text>      
        <text x="20" y="20" transform="rotate(90, 20, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG与文本：使用textPath进行字符串的显示     
        </text>   
       <text x="40" y="20" transform="rotate(90, 40, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG与文本：使用textPath进行字符串的显示     
       </text>   
        <text x="60" y="20" transform="rotate(90, 60, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG与文本：使用textPath进行字符串的显示     
       </text>    
       <text x="80" y="20" transform="rotate(90, 80, 20)" style="letter-spacing:10px" rotate="-90" >      
             SVG与文本：使用textPath进行字符串的显示     
       </text>          
    </g>   
</defs>    
<use xlink:href="#p1"  fill="none" stroke="blue" x="0" y="0" />      
<use xlink:href="#p1"  fill="none" stroke="blue" x="100" y="0"/>   
<use xlink:href="#p1"  fill="none" stroke="blue" x="200" y="0"/>  
<use xlink:href="#p1"  fill="none" stroke="blue" x="300" y="0"/>  
<use xlink:href="#p1"  fill="none" stroke="blue" x="400" y="0"/>  
	</svg> 
</body>
</html>

运行结果为：

17、