【问题标题】:SVG scaling from centerSVG 从中心缩放
【发布时间】:2012-07-19 01:43:12
【问题描述】:

我一直在尝试在我的网站上缩放我的徽标以填充背景。这个想法是整个浏览器视口应该“潜入”徽标的中心。为此,我制作了徽标的 SVG 文件,并将 jQuery SVG 包含在我的网站中。

我已经开始掌握 jQuery SVG 动画的窍门,但我无法让整个事物从中心缩放。在研究过程中,我想到了应该在 SVG 缩放时对其进行转换,但我还没有完全弄清楚算法或如何将它与 jQuery animate 一起使用。

如果有人能提供答案,我将不胜感激。

项目位于此处(连同动画的当前状态):http://danieldunderfelt.com

【问题讨论】:

  • #logo-img 位于左前 50%。这就是为什么它偏向一边。

标签: jquery svg jquery-animate scale center


【解决方案1】:

这实际上只是一个 CSS 问题。一开始,您使用的是

position: absolute;
top: 50%;
left: 50%;
margin: -60px 0 0 -50px;

将包含小 svg 的部分居中。这是古老的经典负边距技巧。

问题是,当您放大 svg 时,您还需要将负边距增加到新(更大)高度和宽度的一半,而您还没有这样做。要么,要么将top 的值设置为零,这样它就不会向下推。这不是特定于 svg 的问题。您需要为元素的比例和将其定位在页面上的 css 值设置动画。现在你只做第一个。

我建议使用 margin: auto 来使您的部分水平居中。为自己节省一些工作。然后将toptop-margin 设置为动画结束时您想要的位置。

附:我不确定您是否需要 jquery-svg 来解决这些问题。只需在标记中编写 svg 内联,然后使用 jquery animate() 进行动画 css 更改。

【讨论】:

  • 嗨!感谢您的回答,看来我正在努力做到这一点。非常感谢!
  • 我修好了,这个答案很有帮助。你是对的,我不需要 jquery-svg!如果我不以某种方式直接操纵它,我担心 svg 无法正确缩放,但它会自行处理。这就是我的动画代码现在的样子: $("#ddd-logo-svg").animate({ width: "120%", height:"160%", marginLeft: "-90%", marginTop: " -70%", 不透明度: 0.05 }, 800, 'easeInExpo');首先,我尝试为 top 和 left 属性设置动画,但没有成功。
猜你喜欢
  • 1970-01-01
  • 2012-07-16
  • 1970-01-01
  • 2019-12-28
  • 2014-02-24
  • 1970-01-01
  • 2023-03-07
  • 1970-01-01
  • 2012-12-01
相关资源
最近更新 更多