这篇文章需要技术复核。如何帮忙。
这篇文章需要文法复核。如何帮忙。
text
元素定义了一个由文字组成的图形。注意:我们可以将渐变、图案、剪切路径、遮罩或者滤镜应用到text上。
使用上下文
类别 | 图形元素, 文本内容元素 |
---|---|
允许的内容物 | 字符数据以及任意数量、任意排序的下列元素: 动画元素 描述性元素 文字内容子元素 <a> |
示例
<?xml version="1.0"?> <svg xmlns="https://www.w3.org/2000/svg" width="100px" height="30px" viewBox="0 0 1000 300"> <text x="250" y="150" font-family="Verdana" font-size="55"> Hello, out there </text> <!-- Show outline of canvas using 'rect' element --> <rect x="1" y="1" width="998" height="298" fill="none" stroke="1" stroke-width="2" /> </svg>
<text>元素用来绘制文本。下面这段代码展示了如何在坐标系中绘制一段文本。
<svg xmlns="https://www.w3.org/2000/svg" width="100px" height="50px"> <text x="10" y="20">SVG Text Example</text> </svg>
可以旋转SVG文本。下面的代码做了一个演示。
<svg xmlns="https://www.w3.org/2000/svg" width="100px" height="50px"> <text x="10" y="20" transform="rotate(30 20,40)"> SVG Text Rotation example </text> </svg>
SVG文本还可以应用样式。
<svg xmlns="https://www.w3.org/2000/svg" width="100px" height="50px"> <text x="10" y="20" style="font-family: Times New Roman; font-size : 24; stroke : #00ff00; fill : #0000ff;"> SVG text styling </text> </svg>
属性
全局属性
专有属性
DOM接口
该元素实现了SVGTextElement
接口。
浏览器兼容性
Feature | Chrome | Firefox (Gecko) | IE | Opera | Safari |
---|---|---|---|---|---|
Basic support | 1.0 | 1.5 (1.8) | 9.0 | 8.0 | 3.0.4 |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 3.0 | 1.0 (1.8) | 未实现 | (Yes) | 3.0.4 |
这个图表基于这些资源。