Svg не отображается на телефоне
Ребята столкнулся с проблемой по SVG, файлы попросту не отображаются, при этом консоль не ругается, адреса в коде актуальные но само отображение не происходит.
кто то может подсказать, в чем может быть трабл? куда копать то?
ЗЫ: хайд какой-то странный =)
Изменено 14 марта 2016 пользователем BogusUA
Ссылка на комментарий
2 ответа на этот вопрос
Похожие публикации
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
JS:
function openForm() document.getElementById("IconForm").style.display = "block";
>
function closeForm() document.getElementById("IconForm").style.display = "none";
return false;
>
function drawIcon(bc, bg, fc, text) var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';
svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';
svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";
svg += text + "</text></svg>";
alert(svg);
document.getElementById('Dragon').innerHTML += svg;
return true;
>
function acceptArgs() <
var bc = document.getElementById("select_bc");
bc = bc.options[bc.selectedIndex].value;
var bg = document.getElementById("select_bg");
bg = bg.options[bg.selectedIndex].value;
var fc = document.getElementById("select_fc");
fc = fc.options[fc.selectedIndex].value;
var text = document.getElementById("text_in").value;
closeForm();
drawIcon(bc, bg, fc, text);
у svg должно быть три состояния обычное, при наведении, при нажатии
думаю как это сделать
Vне бы хотелось его вставить в html разметку, а не просто с помощью bsckground-position. Т.к. я хочу анимации при наведении (transition).
И я могу менять цвет обводки с помощью css-свойства fill.
Но есть еще одно состояние когда картинка полностью закрашена. Как сделать чтобы то же свг закрашивалось полностью (например при добавлении класса)?
У меня не получается просто добавить css свойство для этого
Какие есть еще идеи?
Как видно, не вся svg поместилась на страницу. А хотелось бы получить результат как на второй картинке, т.е. уместить всю svg в область под <a>Untitled</a> так, чтобы вниз страница не прокручивалась.
Следующий компонент SVG становится невидимым в версии 9.9.9, а этот SVG отображается в версии 9.5.1.
Версия библиотеки SVG: 9.9.9
Версия RN: 0.59
Самый полезный комментарий
Я наконец заставил это работать, используя "9.9.2". Это было при полностью новой установке, поэтому неправильная версия была помещена туда с помощью expo install response-native-svg.
Все 23 Комментарий
Хм, похоже, у меня все работает нормально
Также есть проблемы с SVG на Android. Rect, кажется, создает проблемы . замена Rects на Paths помогла нам.
БОЛЬШАЯ ошибка с Rect в Android! Вылетает приложения. Мне пришлось заменить Path везде в приложении, чтобы остановить "случайные" сбои и отсутствие рендеринга.
Можете ли вы сделать полную, но минимальную репродукцию? Т.е. репозиторий git с новым проектом, ориентированным на реакцию, и наименьшим объемом кода, который позволяет мне просто выполнить git clone & yarn & react-native run-ios без каких-либо дополнительных усилий, чтобы увидеть проблему.
x3 об ошибке Rect. Любой компонент Svg, который включает компонент Rect, приводит к сбою всего приложения на Android (iOS отлично работает).
Вот пример Svg, который вызывает сбой приложения.
реагировать-родной: 0.59.8
response -native-svg:
Нам пришлось заменить Rect на Path, чтобы получить приложение, не идеально, но оно сработало.
Как и было сказано, каждый отдельный SVG, имеющий компонент Rect, либо блокировал рендеринг самого себя и родственных компонентов, либо приводил к сбою приложения.
Я даже могу вынуть родственные элементы и все равно вызвать сбой.
3333 122222 60000
Кроме того, это произошло после обновления до Expo: «^ 35.0.0», в котором response-native-svg также был обновлен до «9.9.2».
Это последняя версия / ветка разработки и собственная версия 0.61.1.
Спасибо @msand за проверку последних версий. Может это ошибка с RN <0.6.0? Мы видим ошибку с 0.59.8.
Я также вижу вылеты из Rect на android. Ошибок не выводится, приложение просто вылетает. Это работало для меня, пока я снова не запустил npm install и что-то не обновил. К сожалению, я не уверен, было ли это обновление response-native или response-native-svg, которое сломало его.
@msand Как мне получить react-native версию 0.61.1?
Даже когда начинаю новый проект с expo, я вижу в yarn.lock, который использую:
версия "0.59.8"
Также вот минимальное воспроизведение вопроса:
Я просто создал новый проект с expo, установил response-native-svg и скопировал пример из прочитанного мной в этом репо. Я не пробовал с эмулятором андроида, но он точно вылетает на моем пикселе 3 XL
@JackDavidson Попробуйте это:
Если вы используете Expo, вы должны использовать версию response-native-svg, включенную в него, не обновляйте ее / не зависите от нее отдельно, нет никаких обещаний, что код js из одной версии будет работать с собственным кодом Другой
По крайней мере, это, похоже, отлично работает с последними версиями:
Редактировать:
Я был сбит с толку, я устанавливал response-native-svg независимо от expo, который обновил его до версии, явно несовместимой с react-native 0.59.8. См. Мой комментарий ниже
@msand Я не понимал, что
Оказывается, если я заблокирую зависимость response-native-svg от версии, которая обычно поставляется с expo, это сработает. Это версия 9.9.2 для всех, кто хочет знать на этой странице.
@JackDavidson , теперь это имеет смысл. У нас было «
9.9.2» в нашем package.json, который, вероятно, обновляет библиотеку до более высокого уровня, чем «9.9.2» при запуске yarn, тем самым нарушая ее. Ух . Эти конфликты библиотек и несовместимости иногда сводят с ума.
@JackDavidson Вы правы, это проблема с версией, я тоже думал, что она "включена", но нужно запустить _expo install response-native-svg_ [expo docs] (https://docs.expo.io/versions / последний / SDK / SVG /). Я занимался этой проблемой уже несколько дней !. Как сказал @bogrees ("
9.9.2"), я изменил свой package.json на этот: "react-native-svg": "9.9.2" и я могу запустить пример кода без каких-либо проблем.
Я наконец заставил это работать, используя "9.9.2". Это было при полностью новой установке, поэтому неправильная версия была помещена туда с помощью expo install response-native-svg.
1 ответ
У меня есть возможность загрузить изображение <input type=file name=Images /> затем он сохраняется в моем проекте вот так Guid g = Guid.NewGuid(); Images.SaveAs(Server.MapPath(
/Uploads/ + g + .jpg)); fileNames = g.ToString() + .jpg; по какой-то причине, когда кто-то.
Я не знаю, является ли этот вопрос хорошим вопросом или глупым вопросом, но я исследую SO за последние 3 дня, только эту ссылку я могу видеть. И в этой ссылке я не получаю никакого решения для своей проблемы. Мой вопрос заключается в том, как проверить мой номер мобильного телефона при пропущенном.
Вы используете код Xamarin.Forms для библиотеки XamSvg . Вместо этого попробуйте код Xamarin.Android , так как ваш проект нацелен на устройства Android . Вот код из руководства по началу работы хранилища компонентов XamSvg :
Android 3.1+ (api 12)
Откройте проект Android, откройте nuget, затем добавьте "XamSvg". Пакет nuget был скопирован в локальный кэш установщиком компонентов.
Добавьте папку с именем raw в папку стандартные ресурсы
Добавьте свои изображения svg в эту папку raw. Убедитесь, что у них есть действие AndroidResource build.
В вашем приложении или классе MainActivity инициализируйте lib Svg, вызвав XamSvg.Setup.InitSvgLib(); Это очень быстро и связывает кросс-платформенный цветовой помощник с конкретной версией android.
Для отображения myimage.svg изображения:
Похожие вопросы:
Я разрабатываю класс JavaScript для отображения всех объектов SVG, но когда я создаю элемент image, браузер его не отображает. Хотя, если я скопирую сгенерированный код и помещу его в другой.
Я пытаюсь добавить SVG в качестве фонового изображения, но по какой-то причине оно не отображается, и я не знаю почему. Вот это svg: <svg viewBox=0 0 1000 100 preserveAspectRatio=none>.
У меня есть возможность загрузить изображение <input type=file name=Images /> затем он сохраняется в моем проекте вот так Guid g = Guid.NewGuid();.
Я не знаю, является ли этот вопрос хорошим вопросом или глупым вопросом, но я исследую SO за последние 3 дня, только эту ссылку я могу видеть. И в этой ссылке я не получаю никакого решения для своей.
Я хочу сохранить как изображение, которое находится на экране мобильного телефона android с интервалом времени 10 секунд. Это может быть домашний экран, экран меню или что-то еще. Может ли.
Я попытался перевернуть изображение. Это прекрасно работает. Но это переворачивание изображения происходит и на мобильном экране. Я не хочу, чтобы это переворачивалось на экране мобильного телефона.
Чтобы скрыть строку меню на экране мобильного телефона, я использовал: @media (min-width:320px) < menu> @media (min-width:481px) < menu> Но это также приводит к.
Внутри моего веб-сайта я вставляю несколько svg. Все они работают отлично в Chrome, Firefox, IE (9+) и в Safari. Howvere, как только изображение, включенное в svg, сафари не отображает изображение.
В соответствии с предыдущей аналогичной темой я пробовал следующее:
Изображение SVG не отображается в Safari - Я не считаю это очень полезным, потому что это удаляет aprt svg.
<meta http-equiv="Content-Type" content="application/xhtml+xml"> в заголовке.
И кроме того, я действительно не знаю, что еще попробовать. Возможно, еще одна интересная вещь: внутри моей страницы изображение не отображается, но я могу открыть svg файл в сафари (только файл), и он будет правильно отображаться. Более того, после того, как он открывается в браузере в виде файла, он также отображается внутри страницы. И я вставляю svg на страницу с тегом img.
У меня есть уменьшенная строка изображения base64, чтобы сократить код. Полный svg можно найти здесь.
UPDATE: просто чтобы быть ясным, svg показывает в браузере (сафари), но изображение отсутствует (я вижу только границу).
ОТВЕТЫ
Ответ 1
Обходной путь, который мы используем в нашем приложении, состоит в том, чтобы иметь script, который находит все элементы img , отображающие изображения SVG, и добавляет скрытые элементы object , загружая одни и те же SVG ( <object style="position: fixed; width: 0; height: 0;" data="image.svg" type="image/svg+xml"></object> ).
Причина, по которой он работает, заключается в том, что тег object правильно загружает внедренные изображения в кеш изображения, так что они видны внутри SVG, загружаемых с помощью тегов img .
Преимущество такого подхода заключается в том, что изображения все еще отображаются с использованием тега img , так что обходной путь может быть применен (а затем удален удаленно, когда браузеры в конечном итоге исправлены), не затрагивая остальную часть приложения/веб-сайта.
Недостатком является создание дополнительного тега object для каждого изображения SVG.
Ответ 2
Это решение работает для меня при отображении встроенного SVG-изображения в Safari.
<object data="image.svg" type="image/svg+xml"></object>
Ответ 3
Кажется, что ответ на этот вопрос работает: Что может сделать Safari пропустить клип-путь и маску с SVG?. См. Инструкции по ссылке из ответа.
Вам нужно воссоздать свой клип, чтобы сделать его видимым. А тег </clippath> не помещается после тега </image> .
Вот маленький измененный код (ссылка на мое изображение вставлена, поэтому вам придется его изменить):
Ответ 4
Так отметил Анто Юркович, есть некоторые известные проблемы с Safari и clipPath. То, что нравится Safari, - это если вы не определяете многоугольник, но вставьте его прямо в clippPath. Также вы должны отдельно группировать clipPath.
Но я все еще не мог получить svg для рендеринга изображения, если я использовал тег img для svg - <img src="https://utyatnishna.ru/info/544446/svg"/> . Поэтому в конце я вложил его так:
Я могу подтвердить, что это правильно отображается в мобильном сафари (на ipad и iphone, сафари для windows и сафари Mac - последние версии).
Итак, чтобы подвести итог. У меня есть этот svgs в отдельном html файле и рендеринг их при необходимости.
Ответ 5
Я столкнулся с этой проблемой, когда я использовал Ajax для загрузки svg spritesheet на страницу. Если бы у меня была страница на странице до того, как был загружен спрайт, она потерпит неудачу и не будет разрешаться после того, как спрайт будет доступен. Любое добавление в дом после загрузки спрайта было прекрасным. Мне пришлось откладывать предметы в доме до тех пор, пока после того, как спрайт закончил загрузку.
Это повлияло только на IOS. Все остальные браузеры не заботились о заказе.
Читайте также: