SVG グループの変換原点の設定が Firefox で機能しないのはなぜですか?

Firefox で SVG グループの変換原点の設定が機能しない

Firefox での変換原点の使用で問題が発生しました (バージョン 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></g></svg>

解決策

CSS を使用して、中心点を中心に単純な歯車を回転させようとしていますSVGグラフィックスを変換します。私はFirefoxであなたと同じ問題を抱えています。transform-originは何の効果もないようです。

解決策は、中心が座標 0 になるように元の SVG 形状を描画することです。 0:

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <rect></rect></svg>

次に、その周りにグループを追加し、目的の場所に移動します:

<svg x="0px" y="0px" width="400px" height="400px" viewbox="0 0 400 400">
    <g transform="translate(150, 100)">
        <rect></rect></g></svg>

これで、Firefox Works で機能する CSS 変換を適用できるようになります (JavaScript を使用しています)ユーザーのアクションに基づいて HTML タグを追加するには忘れずにクラス (js-rotateObject) を追加し、Minimizr を使用して、ブラウザーが変換と変換 (.csstransforms.csstransitions) を処理できるかどうかを確認してください。

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

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

お役に立てれば幸いです。

以上がSVG グループの変換原点の設定が Firefox で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。