SVG中的text(文本)


SVG中的text(文本)处理得非常实用。 你可以把他看为一个图形,所有的图形变换也适用于文本。但它的确是文字,也就是说,用户可以用鼠标选择和复制文本(或其中的一部分)。

 

文本的简单应用

你可以为文本元素的指定一个位置。 可以指定x和y属性表示绝对位置,或dx和dy的属性表示相对位置​​。

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 200 200" version = "1.1">
    <text x = "10" y = "25" fill = "navy" font-size = "15">
        It was the best of times
    </text>
    <text x = "10" y = "25" dx = "5" dy = "15" fill = "navy" font-size = "15">
        It was the worst of times.
    </text>
</svg>

 

text中, 可以使用TSPAN标签, 不同的TSPAN标签文字格式可以设置为不一样,没有从新设置的属性,则继承了他们所在的文本元素的属性。

 

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg viewBox = "0 0 200 200" version = "1.1">
    <g fill = "navy" font-size = "15">
        <text x = "10" y = "25">
            <tspan>
                It was the best of times
            </tspan>
            <tspan dx = "-140" dy = "15">
                It was the worst of times.
            </tspan>
        </text>
    </g>
</svg>

 

上一篇 下一篇

评论



分享