SVG 从中心缩放

Question

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

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

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

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

Answer 1

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

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

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

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

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

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