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 に答える