Javascript 为什么svg图像填充处于打开状态http://justplay.thefa.com 在iOS4中颠倒？

使用raphael和svg为背景图像创建遮罩。你可以在你附近的“发现足球”下面看到它们。第一个标题是：“玩还是不玩”

在所有桌面浏览器和iOS3中，这些看起来都很棒

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

我还在以下网站上创建了一些简单的示例： 及

---

谢谢，多年来一直在努力解决这个问题。。。我完全困惑了

我遇到了同样的问题。显然，iOS使用的坐标系与台式机不同，这导致图像呈现颠倒。Safari为大多数类型的图像纠正了这一点，但没有CSS填充

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

说明：

基本上，您有两个重要的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内容已删除）

---

路径

元素是拉斐尔引用的元素，而

模式

元素是需要更改的元素。您需要将

patternTransform=“scale（1，-1）”

属性添加到

pattern

元素中。这两个元素仅由模式的id链接，因此我不得不进行一些黑客操作，用

.style.fill.replace（'#'，''）

来提取这两个元素。我使用上面的答案作为起点，但在一般的样式中。fill不是获取模式元素id的地方，因此下面是一个更好的版本（事实上，您可以使用

el.pattern.replace（“pattern#“，”）

来获取模式id，但以下方法在传入原始SVG节点或包装在Rapahael对象中的节点时有效）

功能校正IPADSVGFILL（el）{
el=el.nodeName？el:el[0]
if（window.navigator.userAgent.indexOf（“iPad”）>-1）{
//iOS SVG填充使用倒置的坐标系
var模式，
属性=el.attributes，
i、 白细胞介素；
对于（i=0，il=attributes.length；i

不过，我发现它只对重复模式有用——iPad的坐标系太坏了，无法精确定位在所有缩放级别都能正确显示的单个背景图像

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;
                    }
                }

        }

    }