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

Question

http://justplay.thefa.com使用 raphael 和 svg 为背景图像创建 mask 。您可以在找到附近的足球下看到它们。第一个标题为:“玩还是不玩”。

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

为什么图像在 iOS 4 中倒置？有人知道吗？

我还在以下位置创建了一些简单示例: http://the-taylors.org/teststation/raphael/v2.0/masks.html和 http://jsfiddle.net/davetayls/5bWgX/1/

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

Answer 1

我遇到了同样的问题。显然 iOS 使用与桌面不同的坐标系，这导致图像被颠倒渲染。 Safari 会针对大多数类型的图像纠正此问题，但不会纠正 CSS 填充。

我的解决方案是对 Raphael 制作的图案定义元素应用 scale(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)");
}

解释:

基本上，您有 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('#', '') 提取它。