SVGPAN - 平滑过渡放大效果

标签 svg css-transitions css-transforms svg-animate

是否可以在svg元素上实现平滑的缩放效果?

我正在使用 svgpan 脚本,并了解放大是由变换属性控制的。

transform="matrix(0.6,0,0,0.6,0,0)

能否添加“过渡”,使放大功能时过渡平滑?

样本: http://www.cyberz.org/projects/SVGPan/tiger.svg

想法平滑过渡: http://vectorflower.com/preview/smooth_zoom/

最佳答案

您需要更改:

<g id="viewport" transform="translate(200,200)">

类似这样的事情:

<g id="viewport" style="transition: transform 300ms linear;transform: translate(200px, 200px)">

还有 SVGPan 的 ~143 行。 变化:

element.setAttribute("transform", s); 进入:

element.style.transform = s;

把你的 11 美元放在口袋里:)

关于SVGPAN - 平滑过渡放大效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17562606/

相关文章:

html - Svg 绝对中心 - 如何保持比例

css3过渡缓和

javascript - 跨浏览器d3.js SVG线条渲染日期排序

javascript - 手动渲染 SVG 字形

css - 循环进度显示超过100%

css - 带有 :checked not showing after transition complete 的过渡元素

css - 将 div 隐藏在其父级后面?

javascript - 淡入和淡出间隔 Javascript

javascript - 如何获取 CSS3-3d 转换元素的屏幕位置?

jquery - 如何缩放多个 div 并留在容器内?