为什么svg图像在iOS4中颠倒了http://justplay.thefa.com？ [英] why are the svg image fills on http://justplay.thefa.com upside down in iOS4?

问题描述

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填充。

我的解决方案是将比例（1，-1）变换应用于Raphael的模式定义元素制作。请注意，我正在使用Raphael 1.5.2;但是，当我查看时，我没有看到2.0中的任何相关更改。

  if（isIOS（））{
 // iOS SVG填充使用倒置坐标系
 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 / svgversion =1.1width =290height =290> 
< desc>使用Raphaël< / desc>创建
< defs> 
< pattern id =r-11258319patternTransform =scale（1，-1）> 
< image /> 
< / pattern> 
< / defs> 
< path fill =url（＃r-11258319）style =fill：url（& quot;＃r-11258319& quot;）rgb（0,0,0）; /> 
< / svg> 
  

（删除了不重要的SVG内容）

路径元素是您有Raphael引用的元素，以及模式元素是你需要改变的元素。您需要将 patternTransform =scale（1，-1）属性添加到模式元素。这两个元素只是通过模式的id链接，所以我不得不做一些hackery用 .style.fill.replace（'＃'，''）。

http://justplay.thefa.com uses raphael and svg to create masks for background images. You can see them under find football near you. the first has the heading: "To play or not to play".

These look great accross all desktop browsers and iOS 3.

Why are the images upside down in iOS 4?? anybody have any idea?

I've also created some simple examples at: http://the-taylors.org/teststation/raphael/v2.0/masks.html and http://jsfiddle.net/davetayls/5bWgX/1/

Thanks, been trying to work this out for ages... i'm completely baffled

解决方案

I came across the same issue. Apparently iOS uses a different coordinate system from desktops, and that leads to images being rendered upside down. Safari corrects this for most types of images, but not CSS fills.

My solution was to apply a scale(1,-1) transform to the pattern definition element that Raphael made. Note that I'm using Raphael 1.5.2 for this; however, I didn't see any relevant changes in 2.0 when I looked.

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

Explanation:

Basically, you have 2 important HTML/SVG DOM elements:

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

(Unimportant SVG stuff removed)

The path element is the element you have a Raphael reference to, and the pattern element is the element you need to change. You need to add the patternTransform="scale(1, -1)" attribute to the pattern element. The two elements are only linked by the pattern's id, so I had to do a bit of hackery to extract this with .style.fill.replace('#', '').

这篇关于为什么svg图像在iOS4中颠倒了http://justplay.thefa.com？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！