爲什麼svg圖像在iOS4上顛倒了http://justplay.thefa.com？

http://justplay.thefa.com使用raphael和svg爲背景圖像創建蒙版。你可以在靠近你的足球場看到他們。第一個標題是：「玩還是不玩」。爲什麼svg圖像在iOS4上顛倒了http://justplay.thefa.com？

這些翻過所有桌面瀏覽器看起來非常的iOS 3.

爲什麼圖像中的iOS 4倒掛？任何人有任何想法？

我也創造了一些簡單的例子在： http://the-taylors.org/teststation/raphael/v2.0/masks.html和http://jsfiddle.net/davetayls/5bWgX/1/

謝謝，一直在努力工作，這一點對於年齡......我徹底難倒了

來源

2011-10-05 Dave Taylor

我遇到了同樣的問題來了。顯然，iOS使用桌面的不同座標系，導致圖像呈現顛倒。 Safari對大多數類型的圖像進行了更正，但不包括CSS填充。

我的解決方案是將規模（1，-1）轉換應用到Raphael製作的模式定義元素。請注意，我爲此使用了Raphael 1.5.2;但是，當我查看時，我沒有看到2.0中的任何相關更改。

if (isIOS()) { 
    //iOS SVG fills use an upside-down coordinate system 
    var patternID = RaphaelElement[0].style.fill.replace('#', '') 
    var pattern = document.getElementById(patternID); 
    pattern.setAttribute("patternTransform", "scale(1, -1)"); 
}

說明：

基本上，你有2個重要的HTML/SVG DOM元素：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="290" height="290"> 
    <desc>Created with Raphaël</desc> 
    <defs> 
     <pattern id="r-11258319" patternTransform="scale(1, -1)"> 
      <image /> 
     </pattern> 
    </defs> 
    <path fill="url(#r-11258319)" style="fill: url(&quot;#r-11258319&quot;) rgb(0, 0, 0);" /> 
</svg>

（不重要SVG東西除去）

的path元件是元件你有一個Raphael引用，而pattern元素是你需要的元素改變。您需要將patternTransform="scale(1, -1)"屬性添加到pattern元素。這兩個元素只與模式的id相關聯，所以我不得不做一些hackery來提取.style.fill.replace('#', '')。

來源

2012-01-25 02:13:31 user432578

我用上面的答案作爲出發點，但總的來說style.fill並不是從哪裏獲取模式元素的id，所以下面是一個更好的版本（實際上，您可以使用el.pattern.replace("pattern#", "")拿到模式ID來代替，但下面的方法將工作在包裹在Rapahael對象原始SVG節點或一個）

function correctIpadSvgFill (el) { 
     el = el.nodeName ? el : el[0] 
     if (window.navigator.userAgent.indexOf("iPad") > -1) { 
      //iOS SVG fills use an upside-down coordinate system 
      var pattern, 
       attributes = el.attributes, 
       i,il; 
       for(i = 0, il = attributes.length; i < il; i++) { 
        if(attributes[i].name === "fill") { 
         pattern = document.getElementById(attributes[i].value.replace(/(url\(#|\))/g, '')); 
         pattern.setAttribute("patternTransform", "scale(1, -1)"); 
         return pattern; 
        } 
       } 

     } 

    }

過去了，我覺得這只是因爲儘管重複模式非常有用 - iPad的座標系太破碎了，無法精確定位可在所有縮放級別正確顯示的單幅背景圖像。

來源

2012-03-21 16:06:39 wheresrhys

爲什麼svg圖像在iOS4上顛倒了http://justplay.thefa.com？

回答

相關問題