动态插入图片到 svg 中

时间：2022-09-23 18:52:35

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

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



<!DOCTYPE HTML>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <meta name="format-detection" content="telephone=no">

    <title>This is an HTML5 page</title>

    <script type="text/javascript">

        function test() {

            var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image');

			svgimg.setAttributeNS(null,'height','200');

			svgimg.setAttributeNS(null,'width','200');

			svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href', 'http://www.mosoteach.cn/images/custom.png');

			svgimg.setAttributeNS(null,'x','10');

			svgimg.setAttributeNS(null,'y','10');

			svgimg.setAttributeNS(null, 'visibility', 'visible');

			document.getElementById('svg1').appendChild(svgimg);

        }

    </script>

</head>

<body>

<button onclick="test();">Add Image Element to SVG</button>

<svg id="svg1" width="600" height="600" viewBox="0 0 600 600"

     xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink">

  <image xlink:href="http://img.alicdn.com/tps/i4/TB1sLIsGXXXXXb6XFXX1aiKJFXX-4-7.png" x="0" y="0" height="100" width="100" />

</svg>

</body>

</html>

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

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

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

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

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

  3. layer插件layer&period;photos&lpar;&rpar;动态插入的图片无法正常显示

    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&lpar;包含插入图片，动态表格，行合并&rpar;

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

  8. C&num;中如何创建PDF网格并插入图片

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

  9. MWeb 1&period;4 新功能介绍一：引入文件夹到 MWeb 中管理，支持 Octpress、Jekyll 等静态博客拖拽插入图片和实时预览

    之前在 MWeb 中打开非文档库中的 Markdown 文档,如果文档中有引用到本机图片,是没办法在 MWeb 中显示出来和预览的.这是因为 Apple 规定在 Mac App Store(MAS) ...

随机推荐

  1. 轮播效果&lpar;margin-left&sol;top&rpar;移动

    HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  2. 症状解决，原因不详的用非默认管理权限账户登录COM注册成功但找不到类型问题

    http://social.msdn.microsoft.com/Forums/en-US/11f01ceb-52a4-438f-b7ef-727ce7a3e191/atl-project-in-vs ...

  3. HTML中strong与b&comma;em与i标签的区别

    先看效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. 异常 java&period;util&period;regex&period;PatternSyntaxException&colon;

    可变参数是在JDK1.5之后出来的一个行特性,也是一个比较好用的东西 想起好多jfinal还有其他框架的查询方法就有好多用到了可变参数,自己也写了个这样的方法 public class Test{   ...

  5. SSH原理与运用（一）和（二）：远程登录 RSA算法原理（一）和（二）

    SSH原理与运用(一)和(二):远程登录  RSA算法原理(一)和(二) http://www.ruanyifeng.com/blog/2011/12/ssh_remote_login.html ht ...

  6. 转：Linux网络IO并行化技术概览

    转:http://codinginet.com/articles/view/201605-linux_net_parallel?simple=1&from=timeline&isapp ...

  7. Linux系统中常见的目录名称以及相应内容

    目录名称 应放置文件的内容 /boot 开机所需文件——内核.开机菜单以及所需配置文件等等 /dev 以文件形式存放任何设备与接口 /etc 配置文件 /home 用户家目录 /bin 存放单用户模式 ...

  8. web全栈架构师&lbrack;笔记&rsqb; — 03 html5新特性

    HTML5新特性 一.geolocation PC端 精度比较低 通过IP库定位 移动端 通过GPS window.navigator.geolocation 单次 getCurrentPositio ...

  9. 更好用的cmd窗口

    cmder是windows下的命令行工具,用来替代windows自带的cmd. 下载地址 下载后自建文件夹并解压,将Cmder.exe所在文件夹路径加入path, windows + r 键入cmde ...

  10. redis链接

    参考资料:http://www.runoob.com/redis/redis-connection.htmlRedis 连接Redis 连接命令主要是用于连接 redis 服务.实例以下实例演示了客户 ...

相关文章