2013-05-20 3 views
2

У меня довольно большая диаграмма дерева, смоделированная в SVG.SVG прокрутка в firefox/chrome/IE

Он хорошо отображает, с вертикальной прокруткой по желанию, в IE-9.

В Chrome и Firefox не так. Никакая прокрутка в Chrome, но масштабирование позволяет мне видеть немного больше. В Firefox он отображает только количество токенов в вертикальном пространстве.

Я предполагаю, что у меня отсутствуют некоторые атрибуты в элементе «svg», чтобы он отображался правильно в Chrome/Firefox, но не уверен, что.

Вот как начинается источник док:

<!DOCTYPE html> 
<html> 
<body> 

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="100%" width="100%" style="overflow-x: auto; overflow-y: auto;" > 

    <rect x="685" y="15" rx="10" ry="10" width="380" height="116" style="fill:lightgrey;stroke-width:5;stroke:rgb(0,0,0)" /> 
    <text x="777" y="38" fill="black" font-size = "18" font-family = "sans-serif" font-weight="bold">Folder</text> 
    <text x="960" y="38" fill="black" font-size = "18" font-family = "sans-serif" font-weight="bold">Content</text> 

    <rect x="700" y="45" rx="10" ry="10" width="200" height="75" style="fill:powderblue;stroke-width:1;stroke:rgb(0,0,0)" /> 
    ................... and so on for 150000 lines ................... 

Любые идеи о том, что могут быть добавлены так что это будет сделать в Chrome/Firefox, как это делает в IE-9?

+0

В настоящее время Firefox не поддерживает переполнение внешнего элемента . См. Https://bugzilla.mozilla.org/show_bug.cgi?id=378923 –

ответ

2

Значения жесткого кодирования в «height» и «width» решали острую проблему без прокрутки в Chrome и Firefox.

Создания сценария, который генерирует SVG умнее поставить в соответствующих значениях для «высоты» и «ширины» является лучшим решением, но сейчас, просто установив
высоты = «50000» ширина = «2400»
вместо использования % значения, сработанные для меня.