web-dev-qa-db-ja.com

FirefoxでSVGグループにtransform-Originを設定できない

Firefoxでtransform-Originを機能させるのに問題があります（v.18以降、他のバージョンはテストされていません）。 Webkitブラウザーは期待どおりに動作します。 Originをグループの中央に設定しようとしていますが、これまでのところ、これまでのところ何も機能していません。

これがコードです：

#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>
htmlcssfirefoxsvgcss-transforms
25
kevinstueber

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);
}

お役に立てば幸いです。

23
Websemantic

Firefox 55（2017年8月8日リリース）以降、「transform-b​​ox」CSSプロパティがサポートされるようになりました。 "fill-box"に設定すると、SVGツリーのtransform-Originに関してChrome=のそれを模倣します。

transform-Origin: center; /* or transform-Origin: 50% */
transform-box: fill-box;

2017年9月14日更新

SVG構造内で必要な要素を選択できます。または、トムがコメントで指摘しているように、SVG要素のすべての子孫にそれを適用することができます（スタイリングが他の目的に干渉しない限り）。成し遂げる）：

svg .my-transformed-element {
    transform-Origin: center; /* or transform-Origin: 50% */
    transform-box: fill-box;
}

または

svg * {
    transform-Origin: center; /* or transform-Origin: 50% */
    transform-box: fill-box;
}
17
Jim

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

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

  2. メニューからObject> Ungroupを選択します。これにより、変換属性が「フラット化」され、グループ内の要素に座標変換が適用されます。

  3. 元の要素はまだ選択されているはずです。 Object> Groupを選択して、グループに戻します。 CSSを使用して要素を変換する場合は、IDまたはclass属性をこのグループに追加します（このビットにはXMLエディターが便利です。または、グループIDを右で変更することもできます-それをクリックしてObject Propertiesを選択します。クラスは、XMLエディターまたは後でテキストエディターで追加する必要があります。）.

  4. グループを選択した状態で、もう一度Object> Groupを選択します。これにより、元のグループの周囲に新しいグループが作成されます。

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

  6. CSS変換はinnerグループに適用できるようになり、ChromeおよびFirefoxによって一貫して処理されます。

最初の洞察について@ PatrickGrey.co.ukに感謝します。最もトリッキーな部分は、髪を引っ張ったり、大規模な計算に頼ったりすることなく、複雑なオブジェクトの座標に初期変換を適用する方法を理解することでした。 「グループ化、移動、グループ化解除」のトリックはStackOverflowのいくつかの箇所に記載されていましたが、今日まで忘れていました。うまくいけば、これらのステップは誰か他の人をかなりの悲しみから救うことができるでしょう。

8
thirdender

このバグレポート のコメントによると、Firefoxのtransform-boxのデフォルト値はChromeのデフォルト値とは異なります。 Firefox 55以降、このプロパティはフラグを設定せずに設定できるようになりました。

これで問題が解決しました：

transform-box: fill-box;
transform-Origin: center center;
3
LandonSchropp

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

-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など）を使用して値を設定します。

1
Hafenkranich

CSSコードに-moz-transform-Originがありません。

#test{
    -webkit-transform-Origin: 50% 50%;
    -moz-transform-Origin: 50% 50%;
    ...
}
0
Andrei Todorut

FWIW、私はGreensockの問題を解決し、TweenMaxを使用して内部の個々のパスをアニメーション化しました。これは、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でも同じで、ブラウザ間で適切に機能します。

0
Jesse

さらに、transform-box: fill-boxをサポートしていないFirefoxバージョンのアニメーションを無効にすることを検討してください。

このような：

@supports (-moz-transform: rotate(0deg)) and (not (transform-box: fill-box)) {
    #test {
        animation: none;
    }
}

最初のステートメントは、Firefoxを使用しているかどうかを確認することだけです。とにかく、他のブラウザーでそれを無効にしたくないからです。 2番目のステートメントは、transform-box-プロパティがブラウザでサポートされているかどうかを確認します。私はこれを現在のプロジェクトで使用しましたが、それは魅力のように機能します。

0
SoBiT