большая площадь svg не прокрутка

Question

Я часто хочу использовать большие svg для визуализации данных и т. Д. Они часто достаточно велики, чтобы вы использовали браузер для прокрутки вправо и вниз, чтобы увидеть все, как обычно на веб-сайте.

Проблемы начались, когда я хотел позволить людям комментировать. Я сначала использовал foreignobject для встраивания html в svg, но IE не поддерживает это. Затем я перешел на наложение текстовых полей поверх svg, используя текстовые поля и установив их в положение: absolute. Таким образом, текстовая область прекрасно сидит поверх svg.

Единственная проблема заключается в том, что, когда высота svg превышает разрешение экрана, остальная часть svg не существует и не может быть прокручена до. Я могу уменьшить масштаб, который показывает svg, или настроить окно просмотра, чтобы получить svg на экране. Ни один из них не является отличным решением, поскольку я не могу повторно масштабировать снизу в первом случае и потерять свои координаты для абсолютных текстовых областей во втором. (Если я не могу это понять, мне придется динамически корректировать их координаты относительно окна просмотра)

Это не проблема переполнения. Высота - это большое количество пикселей (например, 3000), поэтому я не прошу, чтобы broswer отображал что-либо за пределами границ svg. Я просто хочу прокручивать. Это слишком много, чтобы спросить :)

Извиняюсь за отсутствие кода, SVG имеют тенденцию быть многословным ...

Answer 1

Вы можете использовать position: fixed держать свой комментарий окно фиксируется, когда SVG свитки. Посмотрите на этот пример: http://jsfiddle.net/LLre6fgk/

#comments { 
    position: fixed; 
    right: 0; 
    top: 0; 
} 

---

Затем вы можете использовать absolute, но с контейнером для вашего SVG и ваш DIV: http://jsfiddle.net/LLre6fgk/1/

<div id="container"> 
    <svg width="2000" height="2000"> 
     <path fill="none" stroke="#123" stroke-width="4" d="M0,0h50v50h50v50..."/> 
    </svg> 
    <div id="comments"> 
     <p>Please enter a comment:</p> 
     <textarea cols="20" rows="5"></textarea> 
    </div> 
</div> 

Answer 2

Ладно, так что я нашел эту проблему , И его имя jquery.fullPage. Я включил эту библиотеку, но быстро решил не использовать ее. (А потом забыл удалить его)

Вот как он описывает себя: fullPage.js (является a) плагин jQuery для полноэкранных прокручивающих сайтов.

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