SVG - IE11-10 变换旋转似乎不起作用 [英] SVG - IE11-10 Transform rotate doesn't appear to be working

问题描述

遇到一个奇怪的问题，即变换旋转在 IE 11 中的圆上不起作用.

Got an odd problem where transform rotate doesn't work on the circle in IE 11.

您可以在任何其他浏览器中清楚地看到蓝色进度条，但在 IE 11 和 10 中它运行良好.

The progress bar in blue you can see works clearly in any other browser but in IE 11 and 10 it is working fine.

问题是蓝条不是从顶部开始的.在 IE 11 中，您可以看到它从右侧开始.

The problem is that the blue bar does not start at the top. In IE 11 you can see that it starts on the right.

JSfiddle:https://jsfiddle.net/o7sh7t45/

Javascript:

Javascript:

    var svgs = document.querySelectorAll('.progress__pie')

    if (svgs) {
        [].forEach.call(svgs, function (svg) { 
            let percentage = svg.getAttribute('data-pct')
            let val = parseInt(percentage)
            let bar = svg.querySelector('.bar')
            if (isNaN(val)) {
                val = 100
            } else {
                let r: any = bar.getAttribute('r')
                let circumference = Math.PI*(r*2)

                if (val < 0) {
                    val = 0
                }
                if (val > 100) {
                    val = 100
                }

                percentage = ((100-val)/100 * circumference)
                svg.querySelector('.svg').style.strokeDashoffset = percentage.toString()
                bar.style.strokeDashoffset = percentage.toString()
            }
        })
    } 

推荐答案

IE 不支持对 SVG 元素进行 CSS 转换.您需要将转换添加为 SVG 元素的属性.

IE doesn't support CSS transforms on SVG elements. You would need to add the transform as an attribute on the SVG elements.

<circle ... transform="rotate(-90,100,100)" ../>

这篇关于SVG - IE11-10 变换旋转似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！