Question

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

我已经开始了解jQuery SVG动画，但我无法从中心扩展整个事物。在进行研究时，我发现人们应该在扩展SVG时进行扩展，但我还没有弄清楚算法或如何在jQuery动画中使用它。

如果有人能提供答案，我将非常感激。

项目位于此处（以及动画的当前状态）：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，以便在动画结束时您可以将它们放在任何位置。

P.S。我不确定你是否需要jquery-svg。只需在标记中编写svg内联，并使用jquery animate()进行动画css更改。