0

将SVGimage元素映射到 html。

inkscape 中的图像逆时针旋转 50 度：在此处输入图像描述

<image
   y="178.3712"
   x="-212.40982"
   id="image3002"
   xlink:href="..path"
   height="369"
   width="360"
   transform="matrix(0.64278761,-0.76604444,0.76604444,0.64278761,0,0)" />

根据这个数学逻辑计算 x & y ：

      X = -212.40982, Y = 178.3712

   x = X * 0.64278761 - Y * 0.76604444;

   y = X * 0.76604444 + Y * 0.64278761;

当我在 html 中映射图像时计算 x 和 y 后，它看起来： 在此处输入图像描述

现在可以请任何人帮助我，请解释一下这里出了什么问题？

4

1 回答 1

2

您希望图像保持在文档的范围内，对吗？您当前的解决方案不起作用，因为图像围绕 的中心旋转 50º (0, 0)，但您的图像放置在(-212.40982, 178.3712)。

让我们考虑一个不同的算法。如果图像位于(0, 0)，则旋转将以图像的左上角为中心。旋转将导致图像的一部分超出范围。我们需要弄清楚有多少超出范围，并相应地移动图像。

可以使用以下分段函数计算在 x 方向上的调整量：

  • h × sin(θ)为了0 < θ ≤ π/2
  • h × sin(θ) − w × cos(θ)为了π/2 < θ ≤ π
  • −w × cos(θ)为了π < θ ≤ 3π/2
  • 0为了3π/2 < θ ≤ 2π

其中θ是旋转角度，w分别h是图像的宽度和高度。

y 方向上的调整量简单地向左移动π/2。这个分段函数可以通过使用 4 个方程的最大值来实现所有角度。

为了说明这个例子，请查看这个 Fiddle：http: //jsfiddle.net/XMkYS/

您可以使用 , 应用转换rotate，然后translate固定图像位置。在您的情况下，<image>标签变为：

<image
   y="0"
   x="0"
   id="image3002"
   xlink:href="..path"
   height="369"
   width="360"
   transform="translate(0, 275.775999522832) rotate(-50)" />

进一步阅读：http ://www.w3.org/TR/SVG/coords.html#TransformAttribute

于 2012-07-20T21:05:21.483 回答