动态插入图片到 svg 中使用 createElementNS 来创建svg标签，通过setAttributeNS 来设置属性，

要注意两点，创建的时候要有'http://www.w3.org/2000/svg'，创建的标签要有 height width 两个说属性。


  2. <!DOCTYPE HTML>
  3. <html>
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  7.     <meta name="format-detection" content="telephone=no">
  8.     <title>This is an HTML5 page</title>
  9.     <script type="text/javascript">
  10.         function test() {
  11.             var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');
  12. 			svgimg.setAttributeNS(null,'height','200');
  13. 			svgimg.setAttributeNS(null,'width','200');
  14. 			svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'http://www.mosoteach.cn/images/custom.png');
  15. 			svgimg.setAttributeNS(null,'x','10');
  16. 			svgimg.setAttributeNS(null,'y','10');
  17. 			svgimg.setAttributeNS(null, 'visibility', 'visible');
  18. 			document.getElementById('svg1').appendChild(svgimg);
  19.         }
  20.     </script>
  21. </head>
  22. <body>
  23. <button onclick="test();">Add Image Element to SVG</button>
  24. <svg id="svg1" width="600" height="600" viewBox="0 0 600 600"
  25.      xmlns="http://www.w3.org/2000/svg"
  26.      xmlns:xlink="http://www.w3.org/1999/xlink">
  27.   <image xlink:href="http://img.alicdn.com/tps/i4/TB1sLIsGXXXXXb6XFXX1aiKJFXX-4-7.png" x="0" y="0" height="100" width="100" />
  28. </svg>
  29. </body>
  30. </html>

动态插入图片到 svg 中的更多相关文章

  1. Android向系统相册中插入图片，相册中会出现两张 一样的图片（只是图片大小不一致）

    向系统相册中插入图片调用此方法时,相册中会出现两张一样的图片 MediaStore.Images.Media.insertImage 一张图片是原图一张图片是缩略图.表现形式为:android4.4. ...

  2. 关于添加图片到svg中，rails下使用js， 用parseFloat来调整force.on时的位置

    注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %& ...

  3. layer插件layer.photos()动态插入的图片无法正常显示

    layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...

  4. 自己写的POIUtil，主要解决从不同的HSSFWorkbook复制sheet以及根据单元格插入图片等

    复制sheet的原始代码网上找的,但是小问题很多,然后自己动手改了一下: 根据单元格信息动态插入图片,如果单元格有文字,图片的位置会在文字之后,如果同样的位置已有图片则会往下插入. import or ...

  5. Excel催化剂开源第40波-Excel插入图片做到极致的效果

    不知道是开发人员的自我要求不高还是用户的使用宽容度足够大,在众多Excel插入图片的版本中,都没有考虑到许多的可大幅度提升用户体验的细节处理. Excel催化剂虽然开发水平有限,但也在有限的能力下,尽 ...

  6. 【VBA】批量插入图片

    解决如下问题: 需要批量导入图片到Excel 图片放在一个文件夹中 图片有严格的顺序关系,即按照:共通名_编号的方式命名. 图片格式统一,即均为同一格式. 有两种方式可以插入图片到Excel中,其一为 ...

  7. Java利用poi生成word(包含插入图片，动态表格，行合并)

    转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...

  8. vue中动态引入图片为什么要是require， 你不知道的那些事

    相信用过vue的小伙伴,肯定被面试官问过这样一个问题:在vue中动态的引入图片为什么要使用require 有些小伙伴,可能会轻蔑一笑:呵,就这,因为动态添加src被当做静态资源处理了,没有进行编译,所 ...

  9. C#中如何创建PDF网格并插入图片

    这篇文章我将向大家演示如何以编程的方式在PDF文档中创建一个网格,并将图片插入特定的网格中. 网上有一些类似的解决方法,在这里我选择了一个免费版的PDF组件.安装控件后,创建新项目,添加安装目录下的d ...

随机推荐

  1. 深入浅出 Java Concurrency (2): 原子操作 part 1

    转:http://www.blogjava.net/xylz/archive/2010/07/01/324988.html 从相对简单的Atomic入手(java.util.concurrent是基于 ...

  2. Spark运行各个时间段的解释

    package org.apache.spark.ui private[spark] object ToolTips {  val SCHEDULER_DELAY =    ""& ...

  3. POJ2442 Sequence

    题目链接. #include <iostream> #include <cstdio> #include <cstring> #include <cstdli ...

  4. 学习Javascript闭包（Closure） by 阮一峰

    闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域 ...

  5. 导出Excel文件，npoi方式和通过microsoft.visual basic.dll

    一:例子截图: 二:NPOI截图 三:EmployeeListWindow.cs代码 using System; using System.Collections.Generic; using Sys ...

  6. Git全解析之用起来先

    文章目录 1. Git全解析之用起来先 1.1. 先安装Git环境 1.2. 配置 1.3. 简单了解Git 1.3.1. Git对象模型 SHA 1.3.2. Git目录与工作目录 1.4. 可以开 ...

  7. C - How Many Tables - HDU-1213

    某个人举办生日宴会邀请了很多人来参加,不过呢,这些人有个毛病他们只会与熟悉人的坐在一起,当然他们也信奉朋友的朋友也是朋友这一法则,所以问最少需要多少张桌子...... 好吧我承认这才是裸并查集.... ...

  8. Selenium终极自动化测试环境搭建（一） Selenium+Eclipse+Junit+TestNG

    Selenium终极自动化测试环境搭建(一)Selenium+Eclipse+Junit+TestNG 第一步 安装JDK JDk1.7. 下载地址:http://www.oracle.com/tec ...

  9. raw_input() 与 input()的区别

    raw_input和input两个均是 python 的内建函数,通过读取控制台的输入与用户实现交互.但他们的功能不尽相同.下面举两个例子,来说明两者 raw_input和input两个均是 pyth ...

  10. Ubuntu系统下MySQL读取文件数据ERROR解决

    博文链接:http://haoyuanliu.github.io/2016/04/29/mysql/ 对,我是来骗访问量的!O(∩_∩)O~~ 在使用MySQL进行文件数据读取的时候,在终端敲入命令行 ...