26

transform-origin を Firefox (v.18 以降、テストされていない他のバージョン) で動作させる際に問題が発生しています。Webkit ブラウザは期待どおりに動作します。原点をグループの中心に設定しようとしていますが、これまで試したことはありません。

コードは次のとおりです。

#test {
  -webkit-transform-origin: 50% 50%;
  transform-origin: center center;
  -webkit-animation: prop 2s infinite;
  animation: prop 2s infinite;
}

@-webkit-keyframes prop {
  0% {
    -webkit-transform: scale(1, 1);
  }
  20% {
    -webkit-transform: scale(1, .8);
  }
  40% {
    -webkit-transform: scale(1, .6);
  }
  50% {
    -webkit-transform: scale(1, .4);
  }
  60% {
    -webkit-transform: scale(1, .2);
  }
  70% {
    -webkit-transform: scale(1, .4);
  }
  80% {
    -webkit-transform: scale(1, .6);
  }
  90% {
    -webkit-transform: scale(1, .8);
  }
  100% {
    -webkit-transform: scale(1, 1);
  }
}

@keyframes prop {
  0% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
  20% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  40% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  50% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  60% {
    transform: matrix(1, 0, 0, .2, 0, 0);
  }
  70% {
    transform: matrix(1, 0, 0, .4, 0, 0);
  }
  80% {
    transform: matrix(1, 0, 0, .6, 0, 0);
  }
  90% {
    transform: matrix(1, 0, 0, .8, 0, 0);
  }
  100% {
    transform: matrix(1, 0, 0, 1, 0, 0);
  }
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128px" height="128px" viewBox="0 0 16 16">
    <g id="test">
        <rect fill="#404040" x="7.062" y="3.625" width="1.875" height="8.75"/>
    </g>
</svg>

4

8 に答える 8

24

CSSトランジションを使用して、単純なcog svgグラフィックを中心点を中心に回転させようとしました。私は Firefox であなたと同じ問題を抱えていました。transform-origin は効果がないように見えました。

解決策は、元の svg 形状を描画して、その中心が座標 0, 0 になるようにすることでした。

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
</svg>

次に、その周りにグループを追加し、必要な位置に移動します:

<svg x="0px" y="0px" width="400px" height="400px" viewBox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect id="myObject" x="-50" y="-50" fill="#E52420" width="100" height="100"/>
    </g>
</svg>

これで、Firefox で動作するはずの CSS トランジションを適用できます (ユーザー アクションに基づいて JavaScript を使用して HTML タグにクラスを追加し ( js-rotateObject)、Minimizr を使用して、ブラウザーが変換とトランジションを処理できることを確認します ( .csstransforms.csstransitions)。

#myObject{
    transform: rotate(0deg);
    transition: all 1s linear;
}

.csstransforms.csstransitions.js-rotateObject #myObject{
    transform: rotate(360deg);
}

それが役立つことを願っています。

于 2013-05-23T07:30:20.330 に答える
8

@PatrickGreyの答えは私にとっては完璧に機能しましたが、いくつかのパスを持つはるかに複雑なSVGを処理する必要がありました. Inkscape を使用してこの修正を行うことはできましたが、それには複数の手順が必要でした。Inkscape XML エディターを開いた状態でこれを行うことをお勧めします。これにより、何が起こっているかを確認できます。

  1. 変換する要素を選択し、[オブジェクト] > [グループ]を選択して新しいグループを作成します。このグループをドラッグして、ドキュメントの左上隅の中央に配置します。transform="translate(…, …)"これにより、属性がグループに適用されます。

  2. メニューから[オブジェクト] > [グループ解除] を選択します。これにより、変換属性が「平坦化」され、グループ内の要素に座標変換が適用されます。

  3. 元の要素がまだ選択されているはずです。オブジェクト > グループを選択して、それらをグループに戻します。CSS を使用して要素を変換する場合は、IDまたはclass属性をこのグループに追加します (XML エディターはこのビットに便利です。または、グループを右クリックして [オブジェクト プロパティ] を選択することで、グループの ID を変更できます。クラスは次のようにする必要があります。 XML エディターを介して追加するか、後でテキスト エディターで追加します)。

  4. グループを選択した状態で、もう一度[オブジェクト] > [グループ] を選択します。これにより、元のグループの周りに新しいグループが作成されます。

  5. この新しいグループをドキュメント内の正しい場所にドラッグします。XML エディターを使用して DOM を調べると、外側のグループtransform="translate(…, …)"に が追加されていることがわかります。

  6. すべての CSS 変換を内部グループに適用できるようになり、Chrome と Firefox で一貫して処理されるようになりました。

最初の洞察をくれた @PatrickGrey.co.uk に感謝します。最も厄介な部分は、複雑なオブジェクトの座標に最初の変換を適用する方法を見つけ出すことでした。髪を引っ張ったり、大規模な計算を行う必要はありませんでした。「グループ、移動、グループ解除」のトリックは、StackOverflow のいくつかの場所で文書化されていましたが、今日まで忘れていました。願わくば、これらの手順が他の誰かの悲しみをかなり救ってくれることを願っています.

于 2013-07-12T20:28:49.083 に答える
1

固定ピクセル値を使用できる場合は、代わりにそれを使用して機能させます。

-moz-transform-origin: 25px 25px;
-ms-transform-origin:  25px 25px;
-o-transform-origin: 25px 25px;
-webkit-transform-origin:  25px 25px;
transform-origin: 25px 25px;

一部のブラウザーは、少なくともすべての状況で、パーセンテージ値を使用した transform-origin をまだサポートしていません。固定の px 値がない場合は、javascript ごとに 1 つ計算し、選択したライブラリ (jQuery、Greensock など) を使用して値を設定します。

于 2015-09-01T17:50:30.807 に答える
0

FWIW、TweenMax を使用して内部の個々のパスをアニメーション化する Greensock で問題を解決できました。これは Firefox Gecko と Webkit ブラウザー (Safari/Chrome) で機能しました。しかし、それは私のために働いた）

別の形状の中で回転させたい 2 つのギアを持つ SVG がありました。そこで、各ギアに一意の ID (id="gear1", id="gear2") を付けてから、次のように Greensock で回転させました。

TweenMax.to("#gear1", 3.2, { 
  repeat: -1, //repeat infintely 
  ease: Linear.easeNone,  //no easing, linear motion 
  rotation:360,  //amount to rotate (full) 
  transformOrigin:"center"  //transform origin that WORKS :) 
});

わずかにタイミングが異なる #gear2 も同様で、ブラウザ間でうまく機能します。

于 2016-07-21T00:36:26.993 に答える