0

我正在使用raphaeljs使用 rapheal 的 .path() 方法绘制一些六边形。这很好用。现在我想围绕 y 轴旋转形状以创建 3d 翻转效果，并在用户将鼠标悬停在形状上时显示形状的“背面”。据我所知，svg 还无法实现类似 rotateY 的功能，对吗？

我的问题是：还有其他方法可以产生这种效果吗？也许使用 CSS 过渡？（这可能在 IE < 9 中不起作用）或使用某种 3x3 转换矩阵来伪造效果？

我也找到了这个，但我不确定它是否对我有帮助以及如何将它与 raphaeljs 一起使用 :(

谢谢你的帮助！

缺口

4

1 回答 1

1

您可以通过对其应用 scale(1, -1) 变换来在 y 轴上翻转对象。如果要为翻转设置动画，则需要将变换从 scale(1, 1) 逐渐设置为 scale(1, -1)

这是原始 SVG 中基本概念的简单示例。

<svg xmlns="http://www.w3.org/2000/svg">
  <g transform="translate(0, 100)">
    <path transform="translate(0, -50)" fill="red"  d="M 75,10 L 25,90 L 125,90 z">
      <set attributeName="fill" to="lime" begin="0.5s" fill="freeze" />
    </path>
      <animateTransform attributeName="transform"
       attributeType="XML" type="scale" from="1, 1" to="1, -1" dur="1s" additive="sum" fill="freeze" />
  </g>
</svg>

您可以使用 raphael 在中点处操纵形状，而不是我使用的简单 SMIL 填充更改，这样您就可以看到形状的背面。你也可以使用 raphael 来做动画，虽然 raphael 不会做 SMIL，所以你必须一起使用 raphael 和 javascript 来操作 transform 属性，以便它逐渐从 scale(1, 1) 变为 scale(1, -1)。

于 2013-08-24T08:18:13.377 回答