Svg.js 图片加载

时间:2022-09-21 11:28:35

一.SVG.Image

1.创建和修改图片

var draw = SVG('svg1').size(300, 300);
//SVG.Image 加载图片文件
var image = draw.image('../Scripts/36.jpg');
//指定图片的大小
//默认情况下,图片按原比例缩放
var image = draw.image('../Scripts/36.jpg', 200, 300);
image.stroke({
width: 2,
color: 'blue'
}).size(100, 100);
//修改图片内容
image.load('../Scripts/tool.png');

Svg.js 图片加载

2.图片加载成功事件

var draw = SVG('svg1').size(300, 300);
//SVG.Image 绑定加载成功事件
var image = draw.image('../Scripts/36.jpg').loaded(function (loader) {
console.info(loader);
draw.animate(300).size(loader.width, loader.height);
}); //使用动画
var image = draw.image('../Scripts/tool.png').loaded(function (loader) {
var text = draw.text(loader.url);
text.move(0, loader.height);
text.tspan('宽度:' + loader.width)
.newLine()
.tspan('高度:' + loader.height); image.animate(3000).size(loader.width * 2, loader.height * 2).loop(true, true);
});

loader数据对象如下

Svg.js 图片加载

更多:

SVG.js 文本绘制整理

SVG.js 基础图形绘制整理(二)

SVG.js 基础图形绘制整理(一)

Svg.js 图片加载的更多相关文章

  1. js图片加载效果(延迟加载+瀑布流加载)

    概述 两种图片加载的效果:一种是遇到图片较多时,带读条效果的加载提示:另一种是根据滑块的位置进行预加载,用户不察觉的情况下,实现瀑布流的加载效果 详细 代码下载:http://www.demodash ...

  2. js 图片加载完后的处理事件

    //图片加载完成后再显示页面 document.getElementById('icon').onload=function(){ document.getElementById('wrap').st ...

  3. js 图片加载失败处理方法

    在项目中不可避免会用到图片,尤其是列表,有时候图片会加载失败:这样就会显示一个很难看的坏图片缩略图:下面介绍两种方法,解决这个问题: 1.如果在你的项目中有引入jQuery插件,你可以使用error( ...

  4. JS图片加载失败用默认图片代替

    1.onerror 事件会在文档或图像加载过程中发生错误时被触发. 当图片不存在时,将触发onerror,onerror 中img为 指定的默认图片. 图片存在则显示正常图片,图片不存在将显示默认. ...

  5. JS图片加载失败显示默认图片

    代码如下: <div id='photo<%# Container.DataItemIndex+1%>' style="position: absolute; displa ...

  6. JS图片加载时获取图片宽高信息

    ; var img = new Image(); img.src = node.find("img[class='img1_1']").attr("src"); ...

  7. css背景图片加载失败,页面部分图标无法显示

    1.问题表现:首屏缺失部分图标.点击按钮切换为激活状态时,部分按钮的激活态图标无法显示. 2.问题原因:网络极差,断断续续,点击时添加class:active变为激活态, active.png这张图片 ...

  8. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  9. nginx实现动态分离&comma;解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

随机推荐

  1. C&num; &period;net dotnet属性定义属性,以提供显示明称,默认值

    //使用显示名称初始化 System.ComponentModel.DisplayNameAttribute 类的新实例. displayName 显示名称 [DisplayName("we ...

  2. 【python】lxml查找属性为指定值的节点

    假设有如下xml在/home/abc.xml位置 <A> <B id=" name="apple"/> <B id=" name= ...

  3. Jquery AJax Post 返回值问题

    var msg=0; Validater('abc'); function Validater(Name) { var itemId = 1; $.ajax({ url: 'adminmenu/Val ...

  4. JAVA中的时间操作

    java中的时间操作不外乎这四种情况: 1.获取当前时间 2.获取某个时间的某种格式 3.设置时间 4.时间的运算 好,下面就针对这四种情况,一个一个搞定. 一.获取当前时间 有两种方式可以获得,第一 ...

  5. &period;NET自动更新

    asp.net b/s就是布置在服务器的.你这个是要单机版的更新机制,博客园里面好几篇文章说这事呢. http://www.cnblogs.com/cnsharp/archive/2013/04/11 ...

  6. Android一些解决方案内存问题(一)

    通常我们遇到内存问题时,,解决方案一般有以下的例子: 1.做一些处理上的内存引用,经常使用软引用.加强引用.弱引用: 2.加载在内存中的照片时,它可以处理直接在内存,例如:压缩边界. 3.内存的动态恢 ...

  7. Kemaswill 机器学习 数据挖掘 推荐系统 Ranking SVM 简介

    Ranking SVM 简介 排序一直是信息检索的核心问题之一,Learning to Rank(简称LTR)用机器学习的思想来解决排序问题(关于Learning to Rank的简介请见我的博文Le ...

  8. 第39篇 免费博客github Pages绑定域名

    原文地址:http://blog.laofu.online/2017/06/02/how-bind-domain/ 网站已经有了,需要对网站来绑定一个自己的个性域名,本人是买了一个阿里云的域名,也就是 ...

  9. idea&sol;eclipse下Maven工程集成web服务&lpar;tomcat、jetty&rpar;

     idea/eclipse下Maven工程集成web服务 转载请注明出处:http://www.cnblogs.com/funnyzpc/p/8093554.html 应用服务器最常用的一般有这哥仨: ...

  10. 环境判断:区别h5打开还是weixin打开?

    var source_platform = '' , pf_source = 2; //系统平台 //区别是否是 微信浏览器 , source_platform 系统平台 2018.12.6新增 va ...