Кросс-браузерная работа с SVG

Векторная графика*

Вот такой вопрос: у меня есть более-менее рабочая веб-морда на SVG (здесь можно глянуть исходники), работает она только в Firefox. Т.к. хром и опера не воспринимают межсайтовые запросы, я перенес весь этот код на один сервер. CGI при этом работали, но SVG перестал отображаться (хотя кроме адреса CGI в коде ничего не менялось).
Тогда я внедрил объект SVG напрямую в код html-странички. Изображение появилось, но кривое: в хроме неправильно отображаются области отсечения заливки; в огнелисе показывается только верхняя часть изображения.

Подскажите, пожалуйста, где можно почитать о методах вставки динамических SVG со статическими элементами (статика — контур и области отсечения) в html, чтобы результат работал во всех браузерах.

—

21 января в 14:30

2

Eddy_Em 65,6

отсортировано по дате по оценке
ответы (1)

0

mayorovp 21 января в 22:08 #

решение

не здесь, а здесь :)

Да, кривовато ссылка вышла: скобка откуда-то взялась.
Ну, а насчет вопроса как? Eddy_Em, 22 января в 02:27

Хм, я смотрю, SVG, похоже, не сильно-то в почете. Но переписывать рабочую «морду» на webGL пока для меня рановато: времени столько нет. Eddy_Em, 23 января в 11:39

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.

Теги Хабрахабра

<habracut>: Используется только в текстах постов, скрывает под кат часть текста, следующую за тегом (будет написано «Читать дальше»).

<habracut text="Подробности" />: Так можно превратить надпись «Читать дальше» в любой текст.

<source lang="Язык"></source>: Подсвечивает исходный код (на выбор: Bash, C#, C++, CSS, Diff, HTML, XML, Ini, Java, JavaScript, PHP, Perl, Python, Ruby, SQL, 1C, AVR Assembler, ActionScript, Apache, Axapta, CMake, CoffeeScript, DOS, .bat, Delphi, Django, Erlang, Erlang REPL, Go, Haskell, Lisp, Lua, MEL, Markdown, Matlab, Nginx, Objective C, Parser3, Python profile, RenderMan, Rust, Scala, Smalltalk, TeX, VBScript, VHDL, Vala ).

<video>http://...</video>: Добавляет в пост видео со следующих хостингов: YouTube, RuTube, Google video, Vimeo, Я.Видео и Видео@Mail.ru
Вставляйте между тегами только прямую ссылку на видеоролик.

<slideshow>http://...</slideshow>: Вставка интерактивного слайд-шоу. Пока поддерживается только сервис Slideshare.net.

<hh user="Ник" />: Выводит имя хабрапользователя посреди текста, обратный слеш (/) в конце тега обязателен.

Стандартные

<h1></h1> ... <h6></h6>: Заголовки разного уровня.

<img src="" />: Вставка изображения, в атрибуте src нужно указывать полный путь к изображению. Возможно выравнивание картинки атрибутом align.

<a href="http://...">Ссылка</a>: Вставка ссылки, в атрибуте href указывается желаемый интернет-адрес или якорь (anchor) для навигации по странице.

<anchor>Example1</anchor>: Тег для указания якоря. Для вызова используйте тег вставки ссылок (<a href="#Example1">Текст</a>).

<b></b> <strong></strong>: Выделение важного текста, на странице выделяется жирным начертанием.

<i></i> <em></em>: Выделение важного текста, на странице выделяется курсивом.

<s></s> <strike></strike>: Текст между этими тегами будет отображаться как зачеркнутый.

<u></u>: Текст между этими тегами будет отображаться как подчеркнутый.

<hr />: Тег для вставки горизонтальной линии.

<blockquote></blockquote>: Используйте этот тег для выделения цитат.

<table></table> <th></th> <td></td> <tr></tr>: Набор тегов для создания таблицы. Тег <td> обозначает ячейку таблицы, тег <th> - ячейку в заголовке, <tr> - строчку таблицы. Все содержимое таблицы помещайте в тег <table>.

<sup></sup> <sub></sub>: Текст, заключенный в тег <sup> отображается в виде верхнего индекса, <sub> - в виде нижнего.

<abbr title="" ></abbr> <acronym title="" ></acronym>: Тегом <abbr> выделяется аббревиатура, в атрибуте title указывайте её расшифровку. Используйте тег <acronym> для устоявшихся аббревиатур.

<pre></pre>: Текст в теге <pre> не форматируется автоматически.

<nobr></nobr> <br clear="all|left||right" />: Текст, помещенный в тег <nobr>, не переносится на странице; для принудительного переноса текста используйте тег <br />; для аккуратного выравнивания изображений используйте атрибут clear="all|left||right" в теге <br />.

<ul></ul> <li></li>: Ненумерованный список; каждый элемент списка задается тегом <li>, набор элементов списка помещайте в тег <ul>.

<ol></ol> <li></li>: Нумерованный список; каждый элемент списка задается тегом <li>, набор элементов списка помещайте в тег <ol>.

-AdRiver-

Прямой эфир ↓

Alex2ndr → Использование Arduino UNO в качестве программатора 4

Ogra → Жизнь без объектов 114

wearbo → Фото офиса Facebook в Menlo Park 54

Gol → Самый глубокий Сайт 19

tibalt → Всегда рядом, или почему я ушел от Сбербанка 276

fuCtor → «Умные» часы MetaWatch для любителей гаджетов 13

kashey → Локализация точки в выпуклом многоугольнике 41

dijay → Создание анимированного 3D Шара на CSS3 20

Dennsy → Термометр с прогнозом погоды 12

itdevelop → Создание простейшего приложения на Java 2 7

Похожие вопросы ↓

Кросс-браузерная работа с SVG

Какие существуют способы хранения ресурсов в мобильном HTML5-приложении?

«Ручное» управление HTML5 кешем

SVG-фон

Кроссбраузерная библиотека зависимостей (js, css)

Возможности HTML5

html5 движки

Посоветуйте как найти JS-разработчика для создания бизнес-ориентированной HTML5-игры

javascript html5 и sqlite

HTML5, IE7 и jQuery

Лучшее ^{за 24 часа} ↓

Toster

Жизнь без объектов

Локализация точки в выпуклом многоугольнике

Вещи, о которых следует помнить, программируя на Python

Разрабатываем модуль PHP на C++. Часть 1: экскурс в мир Zend Engine 2

Всегда рядом, или почему я ушел от Сбербанка

Полнометражный документальный фильм о демосцене: The Art Of The Algorithms

Как работает приложение InstaCRT?

Патефон ПТ-3: обзор, характеристики и демонстрация работы. Год выпуска — 1935

Запрограммируем вакансию

Новый виток архитектуры CUDA

« все лучшие