animate()方法不会返回目标元素,而是返回SVG的一个实例。Runner具有与任何元素相同的方法和控制运行器的其他方法:
let rect = draw.rect(100, 100)
let runner = rect.animate()
runner.element()
runner.timeline()
runner.animate()
runner.schedule(timeline, delay, when)
runner.unschedule()
runner.loop(times, swing, wait)
runner.queue(runOnceFn, runOnEveryStepFn)
runner.during(fn)
runner.after(fn)
runner.time()
runner.duration()
runner.loops()
runner.persist()
runner.position()
runner.progress()
runner.step(dt)
runner.reset()
runner.finish()
runner.reverse()
runner.ease()
runner.active()
runner通常通过调用animate来创建。但是,可以在没有元素的情况下创建runner,然后再设置元素:
var runner = new SVG.Runner(1000)
runner.move(100, 100)
runner.element(someElement)
runner.step(20)
var timeline = new SVG.Timeline()
timeline.schedule(runner)
不要对建筑大意。
BUG:缩小版本不起作用
原因:svgElem.reRunMixin 使用 function.name 属性来执行对象克隆的一些逻辑,但库被混淆了名称丢失。 好吧他妈的我...
最后更新时间 10:54 pm(2014 年 1 月 4 日)Jordan Yu,2014
vue-svg允许您根据您提供的以多种方式导入.svg文件。 目前,这允许您执行以下操作:
file.svg - 使用file-loader正常导入
file.svg?data - 使用url-loader导入 base64 数据 url
file.svg?inline - 使用vue-svg-loader内联导入
file.svg?sprite - 使用svg-sprite-loader导入(alpha 实现)
使用新的 ,就像导航到您的项目并运行一样简单:
$ vue add svg
而已! 你准备好了!
使用示例记录为:
<!-- Vue.js code -->
<!-- Outputted html -->
标准外部进口
使用file-loader通常作为外部
该存储库包含在基于浏览器的SVG之上添加3D功能的代码。 它建立在。
看一个例子动画,和它的源代码。 该页面显示了以下动画内容:
这是处于pre-alpha状态。 它只是一个原型/实验,如果要向前发展,就需要对其进行记录,测试,增强,以及引入的构建系统等。
我想进行的一些增强包括这些。
创建一个Mesh类,该类是Polygon的集合。
使用细分算法(包括折痕和清晰度参数)扩展Mesh类。 (这尤其重要,因为由于SVG的限制,目前遮挡算法有时仅是正确的。可以通过将大多边形分成许多小多边形来使其变得更好。)
添加常见形状的类,例如:
yarn add @svgdotjs/svg.filter.js
在html文档中包含svg.js库之后,请包含此插件。
这是在示例页面上如何实现每种过滤效果的方法。
色相旋转180
亮度到alpha
伽玛正确1
伽玛校正2
var image = draw . image ( 'path/to/image.jpg' ) . size ( 300 , 300 )
image . filterWith ( function ( add ) {
add . gaussianBlur ( 30
工作流-svg.js
workflow-svg.js是一个 JS 库,用于将工作流呈现和编辑为 SVG。 您可以移动实体并定义它们之间的连接。 为您的项目包含和配置它很简单。 在上看一个真实的例子。
使用npm i workflow-svg.js安装库。 就这些。
安装时,将安装两个额外的库。 首先导入它们:
svg.js: [removed][removed]
svg.draggable.js [removed][removed]
如果你想与 IE11 兼容,你也必须导入 svg.js Polyfills:
<script s