动态插入图片到 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.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. Response对象

    Response对象来自HttpResponse类,它用于向客户端输出信息或设置客户端输出状态,使用Response对象可以直接发送信息给浏览器.重定向浏览器到另一个URL或设置cookie的值等. ...

  2. Delphi中ADO异步执行方式

    当ADO开始处理数据后,应用程序必须等到ADO处理完毕之后才可以继续执行.但是除了同步执行方式之外,ADO也提供了异步执行的方式,允许当ADO处理时,应用程序仍然能够先继续执行.而当ADO处理数据完毕 ...

  3. java学习之运算符

    学习完了变量+常量,现在只能简单的声明变量+赋值+打印变量. 但是程序要做的就是去处理数据,把原本散乱的数据,处理成有意义的数据,供我们来使用,这就涉及到了运算符的应用. 算数运算符常用的种类: 加法 ...

  4. 【JavaScript】

    右键禁用.防止文字选中 .返回选中的文本 JavaScript 原理 Javascript高性能动画与页面渲染 前端不为人知的一面--前端冷知识集锦 屏幕外去计算值,position:absolute ...

  5. 图论（网络流）：[SCOI2015]小凸玩矩阵

    Description 小凸和小方是好朋友,小方给小凸一个N*M(N<=M)的矩阵A,要求小秃从其中选出N个数,其中任意两个数字不能在同一行或同一列,现小凸想知道选出来的N个数中第K大的数字的最 ...

  6. QTP自传之测试报告

    前言 测试报告是测试阶段的最后产出,也是最重要的产出,自动化测试报告也是如此.前期所做的工作,添加对象.编写脚本等都是为了可以生成一份正确.严谨的测试报告.我作为一款功能全面的自动化测试工具,毫无疑问 ...

  7. 【26】Remove Duplicates from Sorted Array

    [26]Remove Duplicates from Sorted Array Given a sorted array, remove the duplicates in place such th ...

  8. Sentry Server 日志记录分析服务

    原文地址:http://blog.shanbay.com/archives/998 或许你不太会喜欢异常,特别是那些发生后继而沉默在应用日志里那些,你不知道从何开始,因为它们看起来并非那么平易近人,但 ...

  9. 《A First Course in Probability》-chaper3-条件概率和独立性-贝叶斯公式、全概率公式

    设有事件A.B. 下面结合具体的题目进一步理解这种方法: Q1:保险公司认为人可以分为两类,一类易出事故,另一类则不易出事故.统计表明,一个易出事故者在一年内发生事故的概率是0.4,而对不易出事故者来 ...

  10. [置顶] [混迹IT职场系列]一、转正的那些事儿

    讲起转正,是每个IT人进入职场后要面对的第一关,只有越过这第一关卡才能更加顺利玩弄职场或被职场玩弄或互相玩弄. 很多人觉得转正只需自身努力即可,譬如有句话叫做 “只要功夫深,铁针磨成棒”.其实不然,职 ...