为什么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？

回答

相关问题