0

有一个非常棘手的问题，我一直试图弄清楚一段时间。本质上，我正在构建一个大型旋转轮，该轮具有多个以不同速度旋转的元件。它大约是 5000px 正方形，但视口是窗口高度的百分比。由于缩放，轮子本身是一个 SVG，因此它在所有设备上看起来都很清晰。SVG 在某些地方有一些非常复杂的路径。

很难解释，所以我对我正在谈论的内容做了一个准系统演示：http: //jsfiddle.net/UsVeZ/3/e​​mbedded /result /（在此处编辑：http: //jsfiddle.net/ UsVeZ/13/ )。单击/点击文档以查看它的旋转。

一切看起来都很好，并且在桌面（Chrome + Safari）上运行良好，但是当我在 iPad 上旋转滚轮时，移动 safari 会滞后于渲染。旋转动画本身还算流畅，只是渲染跟不上。我的复杂 SVG 更糟糕（不幸的是，我不允许分享，但演示给出了一个想法）。在 iPad 上查看一下，看看我的意思。

我不太确定如何解决这个问题 - 理想情况下，如果有某种方法可以将整个 SVG 保存在内存中（不确定渲染的工作原理或它为什么会这样做），那就太好了。如果有人有任何想法，甚至有不同的方法来接近，那将是惊人的。

4

4 回答 4

1

这不是一个完整的答案，只是您可以遵循的几个策略。

如果你申请...

body {
  -webkit-transform: scale(0.3);
}

您将看到 Mobile Safari 如何缓存您的 svg，它会被像素化，然后正确呈现。如果您点击并等待，当您再次点击时，它将重新缓存图像。但是如果你连续点击，你会注意到你没有给它重新缓存图像的机会。

这也发生在你的 jsfiddle 中，如果你连续点击最终你不会得到任何波涛汹涌的块。

因此，如果您不让 Safari 通过创建无休止的过渡来重新缓存图像，例如...

$("svg").on("webkitTransitionEnd", function(){
  rotation -= .01;
  $("#large").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + rotation + "deg)");
  $("#small").css('-webkit-transform', "translate3d(0, 0, 0) rotate(" + ( rotation * 1.5 ) + "deg)");
});

然后缓存永远不会过时。

但是，一旦您移除主体上的比例，Safari 似乎不会在视口之外缓存任何图形。所以，也许如果你让轮子在加载时完全旋转，它会缓存图像。

于 2012-07-10T18:40:46.367 回答
0

所以我最终无法在我的真实示例中正确解决这个问题。我最终恢复到图像（我将我的大图像分成 9 个较小的图像并将它们平铺以绕过 iOS 的 5mp 限制），并且在每张图像上我应用了以下似乎缓存图像的属性：

-webkit-transform-style: preserve-3d;

它不能很好地扩展，但它可以顺利运行，这更重要。

于 2012-07-18T08:08:21.953 回答
0

我实际上采用了几个不同的 SVG 并在 iOS 中对它们应用了旋转，并在我旋转它的瞬间添加了这个框。我无法在 Safari 或 Chrome（桌面）中复制它。尝试了一堆不同的东西来让它停止，但没有运气。我无法在网上找到很多关于它是否是错误的反馈。

只需应用 -webkit-transform: rotate(122deg);

示例在 - http://bit.ly/QnAgFK

我发现某些 [object] 标签有 #documents 在 Safari 6 中的 svg 周围添加 [html][body] 标签。其他人没有。所以我的假设是这是一个 mime 类型的主机问题，但我已经为 .svg 添加了 image/svg+xml mime-type。

于 2012-09-07T21:05:20.637 回答
0

我对此有一个肮脏的修复。

#topParentId *{
   -webkit-transform-style: preserve-3d !important;
}

我已将 css 应用于 topParentId Id 的每个孩子，这对我来说很好。它在输出中改变了一点css，但对我来说效果很好。

于 2016-12-20T04:50:54.853 回答