动态插入图片到 svg 中

动态插入图片到 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>

转载于:https://www.cnblogs.com/sunkunqi/p/5497633.html

动态插入图片到 svg 中相关推荐

如何给二维码动态插入图片
很多用户在制作二维码时,会在二维码中嵌入Logo图片,以突显一些标志性信息.如果是批量制作的二维码,需要给每个二维码嵌入不同的图片,这种情况该如何实现呢?下面,小编就给大家演示二维码动态插入图片的操作 ...
datagridview 动态插入图片_挑战一张照片制作动态PPT背景
在PPT中,要做出好看的页面动画效果,常常需要用很多图片和装饰元素. 而如果你手头的素材只有一张照片,如何才能快速做出好看的PPT背景效果呢?本期内容,我们就来一起挑战,使用一张照片,制作PPT动态背 ...
Java实现PDF动态插入图片复选框
文章目录 (一)需求描述 (二)制作模板 (三)代码开发 (一)需求描述构建PDF模板,对其中部分数据实现动态插入,主要分为三个组件:普通文本,复选框,二维码图片的动态插入 (二)制作模板因为PD ...
关于添加图片到svg中，rails下使用js，用parseFloat来调整force.on时的位置
注意在代码中用/表示路径...windows中file才是\ 1.<image xlink:href=<%= asset_path 'vnet/virtual_switch.png' %& ...
PHPExcel插入图片到表格中
只能插入本地图片到表格中,不能插入远程链接,需要先写入本地file_put_contents() $excelInfo['path'] = 'D:\phpstudy_pro\WWW\api.321.d ...
SVG学习之动态插入图片
//svg地图插件 jl.ns("js.uicomponent.component"); js.uicomponent.component.SvgImage = jl.extend ...
rdlc实现动态插入图片
1.建一个rdcl 放入一个Tablix控件,删除Tablix的头和尾部,只保留detial, 2.放一个Textbox到detial中.并设置报表数据源 (该数据源中包含图片路径的字段) 3.设置T ...
VBA常用小代码：在批注中批量插入图片
转载自品略图书馆 http://www.pinlue.com/article/2020/03/2914/4410066052558.html 朋友在后台提了这样一个问题,能不能根据名称一键将图片批量 ...
html怎么插动态图片不显示不出来,layer插件layer.photos()动态插入的图片无法正常显示...
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常有朋友遇到同样的问题 http://fly.layui.com/ji ...
Github的README中插入图片，Github仓库项目主页显示图片
Github仓库主页的 README.md 支持 MarkDown 文本,也支持图片显示.显示图片需要提供<img>标签,这个链接可以位于其他服务器上,也可以是GitHub自身的仓库文件. ...

动态插入图片到 svg 中

动态插入图片到 svg 中相关推荐

最新文章

热门文章