почему изображение svg заполняется на http://justplay.thefa.com вверх ногами в iOS4? - PullRequest
Новая
       11

почему изображение svg заполняется на http://justplay.thefa.com вверх ногами в iOS4?

2 голосов
/ 05 октября 2011

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/

Спасибо, я пытался решить это целую вечность ... Я полностью сбит с толку

Ответы [ 2 ]

2 голосов
/ 25 января 2012

Я сталкивался с той же проблемой. Очевидно, iOS использует систему координат, отличную от настольных, и это приводит к тому, что изображения отображаются вверх ногами. Safari исправляет это для большинства типов изображений, но не для заливок CSS.

Моим решением было применить преобразование масштаба (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 - это элемент, на который имеется ссылка Рафаэля, а элемент pattern - это элемент, который необходимо изменить. Вам необходимо добавить атрибут patternTransform="scale(1, -1)" к элементу pattern. Два элемента связаны только идентификатором шаблона, поэтому мне пришлось немного взломать, чтобы извлечь его с помощью .style.fill.replace('#', '').

0 голосов
/ 21 марта 2012

Я использовал ответ выше в качестве отправной точки, но в общем случае style.fill - это не то, где можно получить идентификатор для элемента pattern, поэтому ниже приведена версия, которая работает лучше (на самом деле, вы можете использовать el.pattern.replace("pattern#", "") вместо этого получить идентификатор шаблона, но подход, приведенный ниже, будет работать при передаче в необработанном 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 слишком сломана, чтобы точно позиционировать отдельные фоновые изображения, которые отображаются правильно при всех уровнях масштабирования.

...