为什么在iOS4中http://justplay.thefa.com上的svg图像填充是颠倒的

why are the svg image fills on http://justplay.thefa.com upside down in iOS4?

本文关键字：图像 svg 填充 上的 thefa iOS4 http 为什么 justplay com      更新时间：2023-09-26

http://justplay.thefa.com使用Raphael和SVG为背景图像创建蒙版。你可以看到他们在你附近的足球下面。第一个标题是:"玩还是不玩"。

这些在所有桌面浏览器和iOS 3上看起来都很棒。

为什么iOS 4的图像是颠倒的??有人知道吗?

我还创建了一些简单的例子:http://the-taylors.org/teststation/raphael/v2.0/masks.html和http://jsfiddle.net/davetayls/5bWgX/1/

谢谢，我一直在努力解决这个问题…我完全糊涂了

我也遇到过同样的问题。显然，iOS使用了与台式机不同的坐标系统，这导致图像被颠倒呈现。Safari会对大多数类型的图像进行修正，但不会对CSS填充进行修正。

我的解决方案是对Raphael创建的模式定义元素应用一个scale(1，-1)变换。请注意，我使用拉斐尔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)");
}

解释:基本上，你有两个重要的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链接，因此我必须使用.style.fill.replace('#', '')做一些hack来提取它。

我用上面的答案作为起点，但一般的风格。fill不是获取模式元素id的地方，所以下面是一个更好的版本(实际上，您可以使用el.pattern.replace("pattern#", "")来获取模式id，但下面的方法在传递原始SVG节点或包装在Rapahael对象中的节点时将起作用)

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的坐标系统太坏了，无法精确定位在所有缩放级别下正确显示的单个背景图像。

相关文章：