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

Find, Create and Manage SVG Element

IE 
阅读更多
Just list some frequence usage
------------------------------
tspan:
  • Get by type: var tspans = document.getElementsByTagName("tspan");
  • Get text: var text= tspan.firstChild.nodeValue;
  • Create text:
  • var txt=document.createElementNS('http://www.w3.org/2000/svg','text'); 
    var tspan=document.createElementNS('http://www.w3.org/2000/svg','tspan'); 
    var tnode = document.createTextNode("This is the text");
    tspan.appendChild(tnode);
    txt.appendChild(tspan);
  • onclick: tspan.setAttribute("onclick", "alert(this.id)");
  • // TODO: this code does not work in IE.

    xlink:href:
  • Set href attr:
  • var bg = document.getElementById("ImageId");
    var svgNS="http://www.w3.org/2000/svg";
    var xlinkNS="http://www.w3.org/1999/xlink";
    bg.setAttributeNS(xlinkNS,"href","I.png");


    分享到:
    评论

    相关推荐

      svg在移动端的应用-手势图片拖动,手势放大缩小

      const svgElement = document.querySelector('svg'); svgElement.addEventListener('touchstart', (event) => { startX = event.touches[0].clientX; startY = event.touches[0].clientY; }); svgElement....

      svg转img所需 html2canvas方法,svg转canvas所需canvg方法

      var svgElement = document.getElementById('mySVG'); var svgData = svgElement.outerHTML; // 或者从外部获取SVG数据 var canvas = document.getElementById('myCanvas'); canvg(canvas, svgData); ``` 3. ...

      Svg滚轮缩放实现

      const svgElement = document.getElementById('svgElement'); svgElement.setAttribute('transform', `scale(${scale})`); } ``` 5. **获取和设置缩放比例**:`getSVGScale`函数可以从SVG元素的`transform`属性中...

      Using SVG with CSS3 and HTML5

      Drawing with markup: Learn the vector language of x and y coordinates that let SVG create basic and custom shapes Putting graphics in their place: Use the coordinate system to draw SVG shapes and text...

      实现HTML5 SVG拖拽的JavaScript库插件

      var svgElement = document.getElementById('mySVGElement'); draggy(svgElement); ``` 在这个例子中,`draggy`函数接受一个SVG元素作为参数,并为其添加拖拽行为。默认情况下,SVG元素可以在整个画布内自由拖动。...

      对整个svg手势操作

      var svgElement = document.querySelector('svg'); var hammerManager = new Hammer(svgElement); hammerManager.on('pan', function(event) { // 在这里处理拖动事件 }); ``` 对于更复杂的操作,比如缩放和旋转...

      hammer.js操作svg --示例1

      var svgElement = document.getElementById("draggableSVG"); var hammerInstance = new Hammer.Manager(svgElement); ``` 4. **添加手势识别器**: 添加一个`pan`手势识别器,这将监听拖动事件。我们可以通过...

      javascript实现svg导出图片

      const svgElement = document.querySelector('svg'); const imgBlob = await svg2img(svgElement); const imgURL = URL.createObjectURL(imgBlob); // 创建下载链接 const aLink = document.createElement('a'); a...

      全国各省市SVG地图 全国各省市SVG地图

      全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG地图全国各省市SVG...

      Mastering SVG

      In addition to producing resolution-independent images for today's multi-device world, SVG allows you to create animations and visualizations to add to your sites and applications. The simplicity of ...

      svg转png插件saveSvgAsPng

      var svgElement = document.getElementById('my-svg'); // 调用saveSvgAsPng函数 saveSvgAsPng(svgElement, 'my-image.png'); ``` 此操作将把ID为`my-svg`的SVG元素转换为PNG,并命名为`my-image.png`供用户下载。...

      C#代码 SVG 编辑

      你可以通过NuGet包管理器安装这个库,然后在代码中导入相应的命名空间,如`SVG.SvgDocument`和`SVG.Element`,来加载和操作SVG文件。 在C#中创建SVG编辑工具,你需要实现以下几个核心功能: 1. **SVG文件的读取与...

      SVG拖动简单实现.rar

      let svgElement = document.querySelector('svg > path'); // 获取SVG元素 svgElement.addEventListener('mousedown', handleMouseDown); svgElement.addEventListener('mousemove', handleMouseMove); svgElement....

      jaxb-svg11-1.0.2-API文档-中文版.zip

      赠送jar包:jaxb-svg11-1.0.2.jar; 赠送原API文档:jaxb-svg11-1.0.2-javadoc.jar; 赠送源代码:jaxb-svg11-1.0.2-sources.jar; 赠送Maven依赖信息文件:jaxb-svg11-1.0.2.pom; 包含翻译后的API文档:jaxb-svg11...

      SVG.rar_svg_svg 源代码_svg c++

      SVG,全称Scalable Vector Graphics,是一种基于XML的矢量图像格式,广泛应用于网页设计、软件开发和图形用户界面中。SVG图像以其清晰的分辨率和无限缩放性而受到青睐,尤其在需要高质量图形输出或者需要进行动态...

      meteor-jquery-svg-class:将 jquery 的 addremovehastoggle 类操作扩展到 SVGElement

      将类操作应用于SVGElement实例的SVGElement 。 Jquery 本身不会这样做 依赖关系 流星核心包 ##Credits 补丁的所有功劳归于 Justin McCandless(原版)和 Shaw(改进版),请参阅。 这个包只是流星补丁的总结。

      Android-ChinaMap利用xml解析SVG文件绘制中国省份地图

      for (SVGDocument.SvgElement element : svg.getChildren()) { if (element instanceof SVGPath) { SVGPath path = (SVGPath) element; // 添加点击事件或动画代码 } } ``` 6. **优化性能** 虽然SVG提供了...

      iOS 加载SVG文件

      在iOS开发中,SVG(Scalable Vector Graphics)是一种用于绘制高质量、可缩放图形的矢量图像格式。与像素图不同,SVG图在放大时不会失真,因此在多种分辨率的设备上都能保持清晰。本篇文章将详细介绍如何在iOS应用中...

      纯Java动态生成SVG饼图与JFreeChart超强功能生成SVG图表

      Document document = domImp.createDocument(svgNamespace, "svg", null); SVGGraphics2D svgGenerator = new SVGGraphics2D(document); // ... } } ``` 在上面的代码中,我们使用 Batik 生成了一个 SVG 图形,...

    Global site tag (gtag.js) - Google Analytics