`

svg text参考

 
阅读更多
http://www.w3.org/TR/SVG11/text.html#TextElement

4.4 坐标的显示
    在每个<g>图层中加入onmousemove="changeText(evt)",通过javascript编写changeText(evt)函数,从而实现图形坐标的显示。
function changeText(evt)
{
   targetXtext=svgDocument.getElementById("XPos");
   targetYtext=svgDocument.getElementById("YPos");
   var XPos = evt.getClientX();
   var YPos = evt.getClientY();

   var newXPosText = svgDocument.createTextNode("X 坐标 : " + XPos);
   var newYPosText = svgDocument.createTextNode("Y 坐标 : " + YPos);
targetXtext.replaceChild(newXPosText,targetXtext.getFirstChild());
targetYtext.replaceChild(newYPosText,targetYtext.getFirstChild());
}

地图的缩放、平移和还原
function OriginView() 
{
RecordViewBox();  
var docSVG = document.HUNNUWebGIS_SVG.getSVGDocu ment();
var eSVG = docSVG.getDocumentElement();
var originView = "0 0 600 500";
eSVG.setAttribute("viewBox",originView);
分享到:
评论

相关推荐

    SVG参考文档 可伸缩向量图形

    3. **文本`&lt;text&gt;`和 `&lt;tspan&gt;`**:用于在图形中添加文本,`&lt;tspan&gt;`则用于文本的样式控制和换行。 4. **绘制模型**:包括填充(`fill`属性)和描边(`stroke`属性),可以设置颜色、渐变和图案。 5. **动画**:SVG...

    VML和SVG矢量图形库

    为了进一步学习SVG,你可以参考提供的"VML和SVG矢量图形库"压缩包中的资源。这个库可能包含了示例代码、教程文档、练习项目等,有助于你深入理解并熟练运用SVG技术。不断实践和探索,你将能够轻松地在网页上创建出...

    超炫酷的SVG轮船行驶动画

    - **文本(Text)**:SVG支持在图形中添加可编辑的文本,可以用来标识或装饰轮船。 - **渐变(Gradients)**:线性渐变(linearGradient)和径向渐变(radialGradient)为图形添加深度和真实感,如轮船的阴影和...

    SVG-Text:使用 FabricJS 加载和编辑 SVG

    作为参考,它还包含 SVG 如何在 IE 中显示的图像。问题换行符不渲染到 FabricJS 画布在第一次鼠标按下/交互之前,文本不会以正确的字体显示当使用 SVG 文本的左侧/顶部位置创建 IText 时,文本位于屏幕外

    HTML5 SVG滤镜文字特效

    HTML5 SVG滤镜文字特效是一种利用SVG(Scalable Vector Graphics)技术和JavaScript库...开发者可以参考这个特效的源码,学习如何利用SVG滤镜和JavaScript库创建独特的文字动画效果,提升网页设计的质量和用户体验。

    使用SVG图元绘制图形文件.zip.zip

    在压缩包内的1.doc可能包含了关于如何使用SVG图元的教程或示例,而SVG文件本身则是一个实际的SVG图形示例,可以用于学习和参考。通过这些资源,你可以学习到如何创建SVG图形,如何控制颜色、透明度、填充和描边,...

    基于SVG的矢量图形库Kity.zip

    Kity 是一个基于 SVG 的矢量图形库,帮助你快速在页面上创建和使用矢量元素。 面向对象的接口风格在 Kity 里,所有图形,以及交换的数据,都是以强类型的对象...更详细的使用方法请参考 wiki。 标签:Kity

    HTML5 SVG实现的创意圆环数字时钟特效源码.zip

    通过获取系统时间,JavaScript可以计算出小时、分钟和秒,然后更新SVG元素的属性,如`transform`(用于旋转)或者`text`内容,以反映当前时间。CSS3的动画功能也可能被利用,使指针平滑地转动,增加视觉效果。 此外...

    基于SVG的轻量级js圆形进度条插件

    text: '%v%', colors: ['#f1f1f1', '#2980b9'], duration: 400, wrapperClassName: 'circle-wrapper' }); circle.value(90); // 动态更新进度 ``` ### 其他资源 在提供的压缩包中,`index.html`, `index2...

    blaze-svg:Haskell的SVG组合器

    要深入了解Blaze-SVG,可以参考其官方文档、Hackage页面以及Haskell社区的示例代码和教程。Haskell的类型系统和函数式编程思维可能对初学者有一定挑战,但一旦掌握,将极大提升SVG图形生成的效率和质量。 总之,...

    dxf参考手册(中文版)

    4. 文字(Text):用于标注图形,支持多种字体和样式。 5. 块(Blocks):可以重复使用的图形元素,如标准零件、符号等,提高绘图效率。 三、DXF实体类型 1. 点(Point):简单的坐标位置标记。 2. 直线(Line):两个端点...

    css参考手册4.2.4是一套最新版版的css3中文参考手册.zip

    7. **文本处理**:CSS3增强了对文本的控制,如文本阴影(`text-shadow`)、文字装饰(`text-decoration`)、文本溢出(`text-overflow`)和文字间距(`letter-spacing`)等。 8. **动画与过渡**:CSS3的`transition...

    HTML5+CSS3中文参考手册(3手册) chm版中文参考手册打包

    4. SVG(Scalable Vector Graphics):支持矢量图,图像质量高且可缩放。 5. Web Storage:替代了传统的Cookie,提供更大的存储空间,分为Session Storage和Local Storage。 6. Web Workers和Web SQL:分别用于后台...

    CSS3参考手册 v4.0中文版

    - `background-image`支持SVG和数据URL,增加了更多的图形选项。 - 媒体查询(`@media`):根据设备特性(如屏幕尺寸、分辨率)应用不同的样式,实现响应式设计。 **8. 字体与文本** - `@font-face`规则允许在网页...

    【CSS】css3.0参考手册

    文本阴影(text-shadow)添加了立体感,文本溢出(text-overflow)处理超长文本,以及文本修饰(text-decoration-line, text-decoration-style, text-decoration-color)等属性,让文本样式更加丰富和个性化。...

    基于Python和manim text的芋泥蛋糕团队logo动画设计源码

    这个项目不仅展示了团队的创意和技术能力,也为其他有志于通过动画形式展示品牌形象的设计者提供了一个参考案例。 此外,源码中的test_spiral.py文件可能是一个用于测试螺旋效果的脚本,这表明芋泥蛋糕团队在设计...

    Css参考手册.doc

    在“Css参考手册.doc”中,主要涵盖了背景属性、边框属性和文本属性这三大类CSS样式。 **背景属性**: 1. `background`:这是一个简写属性,可以同时设置背景颜色、图像、重复方式、附件和位置。 2. `background-...

    css参考手册(CSS,CSS2.0,CSS3.0)

    7. **文字阴影(Text Shadow)**:为文字添加阴影效果,提升视觉效果。 8. **颜色和字体管理**:新增更多颜色模式和字体选择器,支持在线字体服务(@font-face)。 **CSS中文完全参考手册** 这份手册通常会包含所有...

    CSS3.0中文完全参考手册-chm版

    CSS3在文本处理方面也有诸多改进,如文本阴影(text-shadow)、文本溢出控制(text-overflow)、文字装饰(text-decoration)以及文本选择样式(::selection)等,让文本更加美观和易读。 **七、图像和媒体** CSS3...

Global site tag (gtag.js) - Google Analytics