Здравствуйте, я работаю над картой svg / js, которая состоит из множества маленьких графиков svg (Городские районы). Я помещаю каждую графику в отдельный файл, чтобы мой основной файл SVG по-прежнему можно было поддерживать и не раздутым. Кроме того, все svgs используют один и тот же файл css.
Я использую тег изображения для ссылки на другой файл, который сам ссылается на файл CSS.
Ожидаемый результат: Откройте 1.svg в браузере и увидите синий прямоугольник.
Я тестировал приложение карты как локальные файлы , где оно просто работало как задумано , но когда я загрузил приложение на веб-сервер , браузерам не удалось загрузить css из сервер - Firefox показывает неустановленную версию svg, а опера вообще ничего не показывает и говорит, что она все еще загружает элемент 2/2. Не имеет значения, загружу ли я его в свой локальный apache или использую Dropbox для тестирования.
Итак, вот SVG:
1.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<image xlink:href="another.svg"/>
</svg>
another.svg:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG- 20010904/DTD/svg10.dtd">
<svg id="rectangle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000">
<rect class="blue" width="50" height="50" />
</svg>
style.css
.blue { fill: blue; }
Вы можете использовать http://dl.dropbox.com/u/40969346/stackoverflow/reference/1.svg, чтобы проверить это самостоятельно.