[交互式SVG组件]Multi-line text box
来源:互联网 发布:快速求斗牛的算法 编辑:程序博客网 时间:2024/06/04 17:50
One feature that I know a lot of people, myself included, would like in SVG is a multi-line text box, so I've made one. You can see the result below and download the file at the bottom of the page. In Chrome, at least, you should see two multi-line blocks of text and two rectangles of empty space. In Firefox or a program like Inkscape you will see two long lines of text. I'm trying to find a simple way to get it to work in Firefox.
The SVG contains two texts element like this:
<text x="5" y="20" onload="create_multiline(evt, 280)">Alice was beginning...</text><text x="160" y="155" onload="create_multiline(evt, 200)">So she was considering...</text>
As you can see, both elements call a function called create_multiline() when they load (which is what Firefox doesn't do). The parameters passed are evt, which allows the function to know which element called it, and a number which defines the width of the box.
The createmultiline function does the following:
Split text at spaces to get an array of words
var words = text_element.firstChild.data.split(' ');
Remove the words from the original text element
text_element.firstChild.data = '';
Add a tspan element containing the first word to the text element
var tspan_element = document.createElementNS(svgNS, "tspan");var text_node = document.createTextNode(words[0]);tspan_element.appendChild(text_node);text_element.appendChild(tspan_element);
Add words to the tspan element one by one
for(var i=1; i<words.length; i++) { tspan_element.firstChild.data += " " + words[i];
If the width is exceeded...
if (tspan_element.getComputedTextLength() > width) {
Remove the previous word
tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len);
Add a new tspan element with that word
var tspan_element = document.createElementNS(svgNS, "tspan");tspan_element.setAttributeNS(null, "x", start_x);tspan_element.setAttributeNS(null, "dy", 18);text_node = document.createTextNode(words[i]);tspan_element.appendChild(text_node);text_element.appendChild(tspan_element);
Start adding words one by one again (continue loop).
http://www.petercollingridge.co.uk/interactive-svg-components/multi-line-text-box
- [交互式SVG组件]Multi-line text box
- [交互式SVG组件]Button
- [交互式SVG组件]目录
- [交互式SVG组件]Isometric projection
- [交互式SVG组件]SVG元素拖拽
- Python使用XML操作mapnik,实现复杂标注(Multi line text symbolizer)
- line box线框
- merge multi-line
- Multi-Line Comments
- Text-svg元素详解
- Text-svg元素详解
- d3js svg:text
- SVG 文本(text)
- SVG 文本(text)
- Android加载SVG实现交互式地图绘制
- 用SVG实现动态交互式地图
- (十七)SVG 实例-可交互式中国地图
- SVG——line,curve
- iOS开发之工具篇-20个可以帮你简化移动app开发流程的工具
- Chapter 3: Screen Widgets
- ASP留言板代码
- Ubuntu下手动安装eclipse,不是用apt-get。
- SHELL下date命令的用法
- [交互式SVG组件]Multi-line text box
- #pragma section
- Jenkins的配置
- 成功创业者必须具备的9个特质[转载]
- 【绝密】2013高考语文复习规划
- StringCbPrintf_l 函数
- char和varchar比较:
- WindowsCE的pbcxml文件的几个重要参数
- Delphi 文件处理(4)