`
zhudeming
  • 浏览: 64097 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JavaScript动态改变svg文本内容

阅读更多
svg文件:
<?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
    version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
>

<text id="txt" x="65" y="70" style="font-size:12px;" fill="red">Hello</text>

</svg>


若想实现动态交互,text标签必须有初值(例:Hello)

方法一:
txt = svgDocument.getElementById("txt");
txt.firstChild.nodeValue="Hello World !";


方法二:
var txt=svgDocument.getElementById("txt");
var newText = svgDocument.createTextNode("Hello World !");
txt.replaceChild(newText,txt.firstChild);


注:方法二来自ibm developerworks,详细请参看http://www.ibm.com/developerworks/cn/xml/x-svgint/index.html



分享到:
评论

相关推荐

    javascript实现svg导出图片

    在SVG(可缩放矢量图形)与JavaScript的结合中,导出SVG为图片功能是一项常见的需求。SVG是一种基于XML的矢量图像格式,它允许创建高质量、可缩放的图形,广泛应用于网页设计和应用程序开发。JavaScript作为浏览器端...

    SVGedit是一个基于Web的快速由JavaScript驱动的SVG绘图编辑器

    5. **文本编辑**:内建文本工具,可添加、编辑和格式化SVG文本。 6. **图层管理**:支持图层创建、排序、隐藏和锁定,便于组织复杂的图形结构。 7. **导出和保存**:用户可以将SVG图形导出为SVG、PNG或其他常见图像...

    svg与javascript的交互实例教程

    1. **基础交互**:如何通过JavaScript改变SVG元素的样式,以及如何添加点击事件监听。 2. **动画制作**:使用SMIL或JavaScript库创建SVG动画。 3. **数据驱动**:如何用JavaScript结合SVG进行数据可视化,如图表绘制...

    用SVG实现垂直滚动文本

    此外,如果需要更复杂的控制,比如暂停、恢复滚动,或者改变滚动方向,可以借助JavaScript与SVG元素交互。例如,使用`requestAnimationFrame`来控制文本的位置更新。 在提供的压缩包文件`clip.svg`中,可能包含了...

    svg与javascript交互

    JavaScript,作为Web开发中最常用的脚本语言,能够与SVG进行深入交互,实现动态效果和用户互动。本文将探讨SVG与JavaScript交互的基础知识,以及如何利用它们来实现简单的文字路径特效。 1. SVG的基本结构 SVG图像...

    javascript将svg转图片代码组件,亲测有效;

    2. **创建`Blob`对象**:SVG内容是文本形式,需要转换为二进制数据才能被浏览器处理。为此,我们可以使用`Blob`接口: ```javascript const blob = new Blob([svgContent], { type: 'image/svg+xml;charset=utf-8'...

    HTML5 SVG剪切文本动画特效.zip

    JavaScript可以实时地改变SVG元素的属性,实现更动态的效果。例如,可能有一个JavaScript函数用于计算文本切割的进度,并根据这个进度更新SVG的剪切路径。 总的来说,“HTML5 SVG剪切文本动画特效”是一个结合了...

    gz.zip_javascript_svg

    这些元素可以通过JavaScript进行动态操作,比如改变颜色、大小或位置。 实现SVG图形的拖动功能,通常需要以下几个步骤: 1. **事件监听**:使用JavaScript的`addEventListener`方法,为SVG元素添加`mousedown`、`...

    经典svg教程——如何在网页中控制SVG图片

    通过JavaScript,开发者可以在不重新加载页面的情况下,与现有的SVG图像进行实时互动并对其做出改变。例如,用户可以缩放图像、在不同部分之间滚动,甚至更改图像的某些属性,如颜色、形状等。这极大地提高了用户...

    SVG动态画树

    总结来说,SVG动态画树涉及到SVG的基本概念、元素、动态性、CSS样式和JavaScript的交互。通过理解和掌握这些知识点,开发者可以创建出引人入胜的、具有交互性的SVG动态树,提升网页的视觉体验。

    HTML5 SVG流体文本悬停特效.rar

    SVG文本元素提供了对字体、大小、颜色等属性的精确控制,而且可以通过CSS进行样式化,这为创建独特的视觉效果提供了无限可能。 在"jiaoben8889"这个文件中,很可能包含了实现流体文本悬停特效的HTML、CSS和...

    svg动态画图

    JavaScript可以与SVG元素进行交互,通过`getElementById`或jQuery的`$(obj)`选择器获取SVG元素,然后利用`getAttribute`和`setAttribute`方法或jQuery的`.attr()`方法来读取和修改元素属性。在大量处理和检查SVG元素...

    SVG与html的交互(svg的js与html的js互调用).pdf

    在 SVG 中,单击矩形时,设置 HTML 中的文本内容,并且调用 HTML 的 JS 函数 FunCallBySvgJs,产生个消息框。 首先,让我们来了解 SVG 和 HTML 之间的交互方式。SVG 文件可以嵌入到 HTML 文件中,通过这种方式,...

    svg(SVG)

    4. **SVG文本**:通过`&lt;text&gt;`元素添加文本,并可以控制字体、大小、对齐方式和方向。 5. **SVG样式**:CSS可以用于控制SVG元素的样式,包括内联样式和外部样式表。可以使用类选择器、ID选择器等来操作SVG元素。 6...

    一个实验性的SVG动画

    在这个项目"FancyLetterAnimation-master"中,我们可以推测这是一个关于文字动画的实验,通过JavaScript实现SVG文本元素的动态效果。 首先,SVG文本元素(`&lt;text&gt;`标签)可以像其他SVG形状一样被操纵。开发者可以...

    JS操作SVG基本封装

    本话题主要探讨的是如何通过JavaScript来操作SVG元素,实现一些基本的功能,如初始化SVG画布、创建不同类型的图形(矩形、线、文本)以及图形的缩放。 首先,让我们深入了解一下`svg.js`这个文件。这是一个封装了...

    SVG实现Loading加载按钮动画图标特效.zip

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许在网页上创建和展示复杂的图形,包括动态和交互式元素。这个压缩包文件"SVG实现Loading加载按钮动画图标特效.zip"包含了实现SVG加载动画效果的...

    svg格式 世界地图

    - **交互性**:SVG支持JavaScript和CSS,可以实现动态效果,如点击高亮、拖动、动画等。 - **可搜索性和可访问性**:由于SVG是文本格式,搜索引擎和屏幕阅读器可以更好地理解和处理它们。 - **编辑性**:SVG文件...

    WEB图形格式SVG及基于XML+XSL的动态生成技术

    SVG还支持丰富的动态效果,如动画、渐变色和滤镜,所有这些都可以通过简单的脚本语言(如JavaScript)控制,实现图像的动态生成和交互。这一点对于动态Web应用而言,提供了无限可能,使得用户界面更加生动、响应性更...

    12个SVG Loading图标演示

    5. JavaScript与SVG:JavaScript可以操作SVG元素,改变其属性,比如路径、颜色、大小等,从而实现复杂的动态效果。例如,使用JavaScript库如Snap.svg或D3.js,可以实现更高级的SVG动画和交互。 6. 文件优化:虽然...

Global site tag (gtag.js) - Google Analytics