CSS在SVG元素IE9 +

變換有一個SVG路徑：CSS在SVG元素IE9 +

<path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/>

我試圖從CSS變換它，而不是從聲明的元素標籤的transform屬性。

這個過程的工作從WebKit和Firefox的罰款，對IE9或10 nothing happens測試然而，當。

<svg> 
    <style> 
     .st8 { 
      -webkit-transform: rotate(45deg); /* works on chrome and Safari */ 
      -moz-transform: rotate(45deg); /* works on firefox */ 
      -ms-transform: rotate(45deg); /* doesn't work on IE */ 
      transform: rotate(45deg); 
     } 
    <style> 
    <path class='st8' d='M73.4,11.3c-6.3,0-6.4,3.6-6.4,3.6v18c0,0,0.6,3.3,6.4,3.3c5.8,0,6.6-3.3,6.6-3.3v-18 C80,14.9,79.7,11.3,73.4,11.3z M75,31.3c0,0-0.3,1.2-1.6,1.2c-1.3,0-1.4-1.2-1.4-1.2V16.6c0,0,0.3-1.3,1.5-1.3s1.5,1.3,1.5,1.3V31.3 z'/> 
</svg>

我試圖在網上搜索任何地方提到的CSS轉換確實無法在IE上工作，但我找不到它。因此，我的問題是，它確實不可能在IE上使用CSS轉換？除了必須嚴格使用元素標記中的transform屬性之外，是否有任何解決方法？

來源

2014-01-23 zanona

雖然IE9 +支持CSS3轉換，他們不支持他們對SVG和最好的我所知，這不能用CSS來實現。

來源：根據已知問題 caniuse對CSS3來變換 http://caniuse.com/#feat=transforms2d

來源

2014-03-28 07:55:14 sam

IE11支持SVG變換屬性，即使它不承認的CSS樣式。見https://connect.microsoft.com/IE/feedback/details/811744/ie11-bug-with-implementation-of-css-transforms-in-svg。

幸運的是，你可以簡單地設置該屬性使用JavaScript來搭配風格：

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

g.setAttribute('transform', transform);

Working Fiddle

來源

2015-02-28 00:18:56

不會對IE9工作！ – vaskort

嗯，它工作在我的IE9模擬器，但我沒有一個IE9計算機來測試它。謝謝你讓我知道。 –

沒有問題，我用ISO測試了VirtualBox的從www.modern.ie，它的最安全的選擇，我認爲。此外，我發現你真的不能等轉換SVG圖像在IE9中，所以我用一個PNG。 – vaskort

CSS在SVG元素IE9 +

回答

相關問題