SVG: draw text

geovindu

发布于 2026-06-19 09:54:48

600

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">	
<title>SVG draw text</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<style>
html, body
{
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#sp
{
	display: block;
	width: 100%;
	height: 100%;
	margin: auto;
	font-family: verdana, sans-serif;
	font-size: 570%;
	fill: #003565;
}
	</style>
</head>

<body>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" width="450" height="450" viewBox="0 0 450px 355px">
    <text x="10"  y="20"  transform="rotate(-5 40,50)" fill="red">Rotated SVG text</text>
	<text x="10"  y="20"  transform="rotate(5 40,50)" fill="blue">geovinu love you</text>
	  <text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
    rotate="5,15,25,35,45,55">
    Not

    <tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
      all characters

      <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
        in

        <tspan id="child3">
          the
        </tspan>
      </tspan>

      <tspan id="child4" fill="orange" x="40" y="90">
        text
      </tspan>

      have a
    </tspan>

    <tspan id="child5" rotate="-10" fill="blue">
      specified
    </tspan>

    rotation
  </text>
	
</svg> 	
	
<svg  version="1.1" height="400" width="550">
 <path d="M 0 100  
		  L 100 100  
		  A 100 100 0 1 1 300 100 
		  L 400 100 " stroke="black" stroke-width="1" fill="none"></path>    
</svg>	
	
	<div style="background:#cccccc;">
	<object id="sp" type="image/svg+xml" data="sitepoint.xml">SitePoint</object>		
</div>
<svg xmlns="https://www.w3.org/2000/svg" viewBox="50 20 2050 680" preserveAspectRatio="xMidYMid meet">
	<title>SitePoint</title>
	<desc>The SitePoint Logo</desc>
	<g id="main">
<polyline points="100,100 150,100 170,150 120,150" fill="#003565"/>
		<polyline points="170,100 220,100 240,150 190,150" fill="#003565"/>
		<polyline points="120,45 170,45 150,95 100,95"  fill="#ff6400"/>
		<polyline points="190,155 240,155 220,205 170,205"  fill="#ff6400"/>
     <text id="sp" x="240" y="150">sitepoint</text>
	</g>
</svg>
</body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-06-17，如有侵权请联系 cloudcommunity@tencent.com 删除

draw

SVG: draw text

SVG: draw text

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐