js 怎么设置SVG元素的文本值_IT百科

<html>

<head>

<title>Insert title here</title>

function load() {

var embedTag = document.createElement('embed')

embedTag.type = "image/svg+xml"

embedTag.width = "640"

embedTag.height = "480"

embedTag.onload = function() {

alert(embedTag.getSVGDocument())

}

embedTag.src = "test.svg"

document.body.appendChild(embedTag)

}

</script>

</head>

</body>

</html>

用<text>标记显示文字

示例

<?xml version="1.0" encoding="iso-8859-1"?>

<text style="fill:redfont-size:24pt" x="100" y="100">Hello World!</text>

</svg>

<text>和</text>标记括起来的内容是要显示的文字"Hello World!"，

style="fill:redfont-size:24px 说明了文字样式大小为24点，用红颜色填充。

x="100" y="100"指示出文字输出的位置

在处理SVG文本时，不要局限于 x 和 y 属性。 <text>元素还有几个可以添加的属性，现在我们开始讨论吧。

dx 和 dy 属性

我们从 dx 和 dy 属性开始讲，和 x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。

和 x 、 y 一样， dx 和 dy 接受一列长度值。

我们还是用上周的示例，然后把值赋给 dx 和 dy 。

</svg>

这里我把 x 和 y 的值都设置为 0 ，然后 dx 和 dy 设置一列长度值。注意到随着长度值的增长，下一个字符的距离也在增长。如果想要在字符间保持相同的间距，你需要给 dx 和 dy 设置相同的值。

This is some SVG Text

一件你可能没注意到的事是上面列表中字符之间的长度和间距，好像有点不太对。如果你测量了每个字符的长度，你期望中的 i 和 s 之间的间距应该是 60px ，这是最后一个值设置的。

但是它没有这样显示的原因是， 60px 拉开的是从“is”中的 i 到“this”和“is”之间的space[空格] 之间的间距。间隔是按照字符（空格也是字符）来算的。

旋转SVG字符

你还可以使用 rotate 属性来旋转字符，它接受一列值。每个数字又代表一个特定的字符。

</svg>

这里我把 x 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符 T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。

欢迎分享，转载请注明来源：内存溢出

js 怎么设置SVG元素的文本值