svg text
- 作者: 卖房子的Amin
- 来源: 51数据库
- 2020-09-26
在处理SVG文本时，不要局限于 x 和 y 属性。 <text> 元素还有几个可以添加的属性，现在我们开始讨论吧。
dx 和 dy 属性
我们从 dx 和 dy 属性开始讲，和 x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。
和 x 、 y 一样， dx 和 dy 接受一列长度值。
我们还是用上周的示例，然后把值赋给 dx 和 dy 。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text</text>
</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 width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>
这里我把 x 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符 T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。
1. 每本似乎tspan可以给的文字换行： 该tspan标签是相同的文字标签，但可以嵌套在文字标签和内部本身。再加上'dy'属性这使得在svg 1.1自动换行的。请注意，“dy”是相对于最后绘制的字形（字符）。
2. 还有foreignobject标签。然后你就可以在svg嵌入html赋予了最大的灵活性。 html是伟大的布局，并已被hacker攻击并没有结束，以支持应用程序布局，绘图，和开发商想要的。但它的强度是自动换行和布局。让html做自己最擅长的 codego.net，并让svg做自己最擅长的。 这适用于大多数浏览器firefox，，webkit的，除了ie9。 :-(网页的故事，不是吗？
3. svgt 1.2引入textarea的，但它只是在我不知道其他的浏览器都不会打算就可以了，但我希望他们会支持由opera 10。
4. 这svg的东西莫名其妙，是不是？ 值得庆幸的是，你可以达到很好的效果，但它需要更多的工作在html 5。 下面是我的asp.net / svg的应用程序的截图，具有一点“伪造”自动换行。 下面的函数将创建一个svg的文本为你，闯入tspan件，其中每行的长度不超过20个字符。
here a realy long
title which needs
wrapping
它并不完美，但它的简单，快速，而且永远不会知道其中的差别。 我createsvgtext（）javascript函数需要三个的x位置，y位置和要显示的文本。的字体，最大字符的每行和文字颜色都是硬编码在我的函数，但是这可以被容易地改变。 要显示在上面的截图所示的右侧的标签，你会叫var svgtext = createsvgtext("here a realy long title which needs wrapping", 600, 400);
$('svg').append(svgtext);
而这里的javascript函数：function createsvgtext(caption, x, y) {
// this function attempts to create a new svg "text" element, chopping
// it up into "tspan" pieces, if the caption is too long
//
var svgtext = document.createelementns(' codego.net 'text');
svgtext.setattributens(null, 'x', x);
svgtext.setattributens(null, 'y', y);
svgtext.setattributens(null, 'font-size', 12);
svgtext.setattributens(null, 'fill', '#ffffff'); // white text
svgtext.setattributens(null, 'text-anchor', 'middle'); // center the text
// the following two variables should really be passed as parameters
var maximum_chars_per_line = 20;
var line_height = 16;
var words = caption.split(" ");
var line = "";
for (var n = 0; n < words.length;="" n++)="" {="" var="" testline="line" +="" words[n]="" +="" "="" ";="" if="" (testline.length=""> maximum_chars_per_line)
{
// add a new element
var svgtspan = document.createelementns(' codego.net 'tspan');
svgtspan.setattributens(null, 'x', x);
svgtspan.setattributens(null, 'y', y);
var tspantextnode = document.createtextnode(line);
svgtspan.appendchild(tspantextnode);
svgtext.appendchild(svgtspan);
line = words[n] + " ";
y += line_height;
}
else {
line = testline;
}
}
var svgtspan = document.createelementns(' codego.net 'tspan');
svgtspan.setattributens(null, 'x', x);
svgtspan.setattributens(null, 'y', y);
var tspantextnode = document.createtextnode(line);
svgtspan.appendchild(tspantextnode);
svgtext.appendchild(svgtspan);
return svgtext;
}
对于自动换行的逻辑是基于这个html5 canvas教程 我希望你找到！ 话筒 更新 有一件事我忘了 那我上面显示，“工作线程图”画面原来只是一个html 5的画布。它的工作漂亮的图标可以拖动，当你点击它们可能出现，甚至ie8感到高兴。 但我发现，如果图“太大”（如4000 x 4000像素），那么将无法在所有浏览器来初始化，什么事都不会出现-但是-尽可能的javascript代码而言，一切工作正常。 因此，即使有错误检查，我的图是出现空白，我无法在这个搅局者的问题发生了检测。var canvassupported = !!c.getcontext;
if (!canvassupported) {
// the user's browser doesn't support html 5
在处理SVG文本时，不要局限于 x 和 y 属性。 <text> 元素还有几个可以添加的属性，现在我们开始讨论吧。
dx 和 dy 属性
我们从 dx 和 dy 属性开始讲，和 x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。
和 x 、 y 一样， dx 和 dy 接受一列长度值。
我们还是用上周的示例，然后把值赋给 dx 和 dy 。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text</text>
</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 width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>
这里我把 x 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符 T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。
dx 和 dy 属性
我们从 dx 和 dy 属性开始讲，和 x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。
和 x 、 y 一样， dx 和 dy 接受一列长度值。
我们还是用上周的示例，然后把值赋给 dx 和 dy 。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text</text>
</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 width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>
这里我把 x 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符 T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。
1. 每本似乎tspan可以给的文字换行： 该tspan标签是相同的文字标签，但可以嵌套在文字标签和内部本身。再加上'dy'属性这使得在svg 1.1自动换行的。请注意，“dy”是相对于最后绘制的字形（字符）。
2. 还有foreignobject标签。然后你就可以在svg嵌入html赋予了最大的灵活性。 html是伟大的布局，并已被hacker攻击并没有结束，以支持应用程序布局，绘图，和开发商想要的。但它的强度是自动换行和布局。让html做自己最擅长的 codego.net，并让svg做自己最擅长的。 这适用于大多数浏览器firefox，，webkit的，除了ie9。 :-(网页的故事，不是吗？
3. svgt 1.2引入textarea的，但它只是在我不知道其他的浏览器都不会打算就可以了，但我希望他们会支持由opera 10。
4. 这svg的东西莫名其妙，是不是？ 值得庆幸的是，你可以达到很好的效果，但它需要更多的工作在html 5。 下面是我的asp.net / svg的应用程序的截图，具有一点“伪造”自动换行。 下面的函数将创建一个svg的文本为你，闯入tspan件，其中每行的长度不超过20个字符。
它并不完美，但它的简单，快速，而且永远不会知道其中的差别。 我createsvgtext（）javascript函数需要三个的x位置，y位置和要显示的文本。的字体，最大字符的每行和文字颜色都是硬编码在我的函数，但是这可以被容易地改变。 要显示在上面的截图所示的右侧的标签，你会叫var svgtext = createsvgtext("here a realy long title which needs wrapping", 600, 400);
$('svg').append(svgtext);
而这里的javascript函数：function createsvgtext(caption, x, y) {
// this function attempts to create a new svg "text" element, chopping
// it up into "tspan" pieces, if the caption is too long
//
var svgtext = document.createelementns(' codego.net 'text');
svgtext.setattributens(null, 'x', x);
svgtext.setattributens(null, 'y', y);
svgtext.setattributens(null, 'font-size', 12);
svgtext.setattributens(null, 'fill', '#ffffff'); // white text
svgtext.setattributens(null, 'text-anchor', 'middle'); // center the text
// the following two variables should really be passed as parameters
var maximum_chars_per_line = 20;
var line_height = 16;
var words = caption.split(" ");
var line = "";
for (var n = 0; n < words.length;="" n++)="" {="" var="" testline="line" +="" words[n]="" +="" "="" ";="" if="" (testline.length=""> maximum_chars_per_line)
{
// add a new
var svgtspan = document.createelementns(' codego.net 'tspan');
svgtspan.setattributens(null, 'x', x);
svgtspan.setattributens(null, 'y', y);
var tspantextnode = document.createtextnode(line);
svgtspan.appendchild(tspantextnode);
svgtext.appendchild(svgtspan);
line = words[n] + " ";
y += line_height;
}
else {
line = testline;
}
}
var svgtspan = document.createelementns(' codego.net 'tspan');
svgtspan.setattributens(null, 'x', x);
svgtspan.setattributens(null, 'y', y);
var tspantextnode = document.createtextnode(line);
svgtspan.appendchild(tspantextnode);
svgtext.appendchild(svgtspan);
return svgtext;
}
对于自动换行的逻辑是基于这个html5 canvas教程 我希望你找到！ 话筒 更新 有一件事我忘了 那我上面显示，“工作线程图”画面原来只是一个html 5的画布。它的工作漂亮的图标可以拖动，当你点击它们可能出现，甚至ie8感到高兴。 但我发现，如果图“太大”（如4000 x 4000像素），那么将无法在所有浏览器来初始化，什么事都不会出现-但是-尽可能的javascript代码而言，一切工作正常。 因此，即使有错误检查，我的图是出现空白，我无法在这个搅局者的问题发生了检测。var canvassupported = !!c.getcontext;
if (!canvassupported) {
// the user's browser doesn't support html 5
在处理SVG文本时，不要局限于 x 和 y 属性。 <text> 元素还有几个可以添加的属性，现在我们开始讨论吧。
dx 和 dy 属性
我们从 dx 和 dy 属性开始讲，和 x 和 y 类似，除了它们的值表示的是相对于前一个字符的长度，而不是相对于整个视窗的绝对定位。
和 x 、 y 一样， dx 和 dy 接受一列长度值。
我们还是用上周的示例，然后把值赋给 dx 和 dy 。
<svg width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="0" dx="10,20,30,40,60" dy="10,20,30,40,50,60">This is some SVG Text</text>
</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 width="660" height="220" style="outline: 1px solid red; overflow: visible;">
<text x="0" y="20" rotate="0,45,0,90,180,0">This is some SVG Text</text>
</svg>
这里我把 x 设置为 0 ， y 为 20 ，给 rotate 属性设置了一列值。字符 T 旋转 0deg ， H 旋转 45deg ，以此类推。直到这列值结束，所有剩下的字符都会保持旋转 0deg 。
推荐阅读
