mozilla
您的搜索结果

    text

    text 元素定义了一个由文字组成的图形。并且我们可以将gradientpattern、clipping path、mask 或者filter应用到文字上。

    使用上下文

    分类 Graphics element, text content element
    允许内容 Character data and any number of the following elements, in any order:
    Animation elements »
    Descriptive elements »
    Text content child elements »
    <a>
    规范文档 SVG 1.1 (2nd Edition)

    例子

    <?xml version="1.0"?>
    <svg xmlns="http://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-width="2" />
    </svg>
    

    <text>元素被用来绘制文本。 下面这段代码展示了如何在坐标系中绘制一段文字。

    <svg xmlns="http://www.w3.org/2000/svg" width="100px" height="50px">
      <text x="10" y="20">SVG Text Example</text>
    </svg>
    

    SVG 的文字是可以被旋转的。 下面的代码做了一个演示。

    <svg xmlns="http://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="http://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) Not supported (Yes) 3.0.4

    这个图表是基于 这一份资源.

    相关

    文档标签和贡献者

    此页面的贡献者有: baiya, charlie
    最后编辑者: charlie,