动态插入图片到 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. 网络流（最大密集度子图，分数规划）：UvaLive 3709 Hard Life

    John is a Chief Executive Officer at a privately owned medium size company. The owner of the company ...

  2. 【枚举】Vijos P1496 火柴棒等式 （NOIP2008提高组第二题）

    题目链接: https://vijos.org/p/1496 题目大意: 给你n(n<24)根火柴棍,你可以拼出多少个形如“A+B=C”的等式?("+"和"=&qu ...

  3. sql server 删除索引的语句

    DROP INDEX index_name ON talbe_nameDROP INDEX IX_TBlueyBook_10 ON 表名

  4. Pet

    Problem Description One day, Lin Ji wake up in the morning and found that his pethamster escaped. He ...

  5. cf702A Maximum Increase

    A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. vijosP1603迷宫

    vijosP1603迷宫 链接:https://vijos.org/p/1603 [思路] 参考Matrix67的文章: [代码] #include<cstdio> #include< ...

  7. Hibernate配置文件中hiberante.hbm2ddl.auto四个参数的配置

    我们在搭建环境的时候,在配置文件中有一个属性标签为: <property name="hibernate.hbm2ddl.auto">     </propert ...

  8. enigma机的原理

    注:本文修改自三思科学<ENIGMA的兴亡>            ENIGMA ENIGMA看起来是一个装满了复杂而精致的元件的盒子.不过要是我们把它打开来,就可以看到它可以被分解成相当 ...

  9. VMware: windows8 与 虚拟机ubuntu 14.04 共享文件夹

    假设当前用户为xxx 安装 VMwareTools 1. 打开 VMwareworkstation窗口,选择”虚拟机” -> “重新安装VMwareTools(T)”. 点击之后,会发现 Ubu ...

  10. [置顶] VC++界面编程之--使用分层窗口实现界面皮肤

    使用分层界面来实现界面皮肤的好处是:可以保证图片边缘处理不失真,且能用于异形窗口上,如一些不规则的窗口,你很难用SetWindowRgn来达到理想效果. 在很多情况下,界面的漂亮与否,取决于PS的制作 ...