web-dev-qa-db-ja.com

CSS変換がSVG gのIE11で機能しない

Gタグを使用してsvg要素のグループを移動したいのですが、最新バージョンでもIEで機能しません。他のすべてのブラウザで動作します。助けてください。

Svgで要素のグループを移動する他の方法を使用する必要がありますか？

http://jsfiddle.net/ahKpq/3/

<svg viewbox="0 0 20 20">
    <g>
        <circle cx=10 cy=10 r=10 />
    </g>
</svg>

g {
    transform: translate(10px, 0px);
    -ms-transform: translate(10px, 0px);
    -sand-transform: translate(10px, 0px);
    -webkit-transform: translate(10px, 0px);
}
htmlcssinternet-explorersvg
22
Curtis

IE11はCSSスタイルを認識していませんが、transform属性をサポートしています。

したがって、JavaScriptを使用して、スタイルに一致するように属性を設定するだけです。

var g= document.querySelector('g'),
    transform= getComputedStyle(g).getPropertyValue('transform');

g.setAttribute('transform', transform);

フィドル

34
Rick Hitchcock

誰かがjQueryでこれをまだ必要とする場合、これは私のために働きました：

jQuery("g").each(function(){
        transform = jQuery(this).css('transform');
        console.log(transform);
        jQuery(this).attr('transform',transform);
    });
6
another user

申し訳ありませんが、カーティス、これを機能させるチャンスはありません（2015年2月2日現在）-公式のIEページを参照してください： https://connect.Microsoft.com/IE/feedback/details/811744/ie11-bug- with-implementation-of-css-transforms-in-svg

4
Kjell

変換属性を使用する

transform = "translate（10、0）"

IEの魅力のように動作します。

オンザフライで変更したい場合は、JSを使用してください

0
MaakuW

誰かがangularjsでこれをまだ必要とする場合、これは私にとってうまくいきました：

.directive('ieTransform', function ($window) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            var elementStyleMap = $window.getComputedStyle(element[0], null);
            var transform = elementStyleMap.getPropertyValue('transform');

            element[0].setAttribute('transform', transform);
        }
    };
})
0
Eydrian