编辑这个页面须要登录或更高权限！
- 您刚才的请求只有这个用户组的用户才能使用：自动确认用户
- 如果您还没有登录请登录后重试。编程那点事是一个开放式网站，修改本站大部分内容仅须要花10秒钟时间创建一个账户。 如果您已经登录，本页面可能是受保护的内容。如果您认为有修改的必要，请联系本站管理人员。
- 该页面已被锁定以防止编辑。
SVG <text> 文本
SVG <text>元素用于在SVG图像中绘制文本。在svg中使用 <text>元素,可以实现绘制文字,文字旋转,多行文字,具有超级链接的文字等
要绘制文本，使用<text>元素。
<h1>SVG Text</h1> <svg width="550" height="150"> <g> <text x="40" y="23" >Text: </text> <text x="40" y="40" fill="rgb(121,0,121)">www.cainiaojc.com 菜鸟教程 </text> </g> </svg>测试看看‹/›
运行后效果如下:
SVG Text
用法解释
x：它定义了文本左上角的位置。
y：它定义文本的顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
旋转文字
它用于创建旋转文本。
<svg height="100" width="200"> <text x="0" y="15" fill="red" transform="rotate(30 20,40)">www.cainiaojc.com</text> </svg>测试看看‹/›
运行后效果如下:
用法解释
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
多行文字
它用于创建多行文本。使用<tspan>元素，可以将<text>元素安排在任意数量的子组中。
<svg width="570" height="100"> <g> <text x="40" y="23" >Multiline Text: </text> <text x="40" y="40" fill="rgb(121,0,121)">www.cainiaojc.com <tspan x="40" y="60" font-weight="bold"> 在线菜鸟教程. </tspan> </text> </g> </svg>测试看看‹/›
运行后效果如下:
用法解释
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
超级链接文字
它用于创建具有超级链接的文本。
<svg width="500" height="100"> <g> <text x="20" y="10" >Text as Link: </text> <a xlink:href="/svg-tutorial" target="_blank"> <text font-family="Verdana" font-size="30" x="40" y="40" fill="rgb(121,0,121)">www.cainiaojc.com</text> </a> </g> </svg>测试看看‹/›
运行后效果如下:
用法解释
x：定义左上角的位置。
y：它定义顶部位置。
width：定义宽度。
height：定义高度。
fill：fill属性用于定义填充颜色。
- Copyright © 2003-2013 菜鸟教程。
- 版权与免责声明
