Держите объект SVG статичным при прокрутке

Question

В моем веб-приложении я создаю файл SVG, который содержит «заголовок», который я хотел бы оставить видимым в верхней части окна, когда пользователь прокручивает изображение вниз.

Я могу придумать два способа достижения этой цели, но я ищу другие яркие идеи. Мои две мысли:

• Создайте два отдельных SVG-файла, один из которых будет «заголовком», а другой - содержимым, а затем просто отобразит их в двух разных элементах HTML <div>, позволяя нижнему пролистывать. Мне не нравится эта идея, потому что мне нужно будет создать два отдельных документа.

• Используйте ECMAScript в самом SVG и найдите способ переместить <g>, который содержит заголовок вверху страницы. Мне это нравится, потому что всякий раз, когда SVG просматривается, он должен работать, но я не уверен, как это сделать, и буду признателен за любые указатели или примеры.

Answer 1

У меня есть пример первого случая здесь :

footer {
    background: url(images/grasspat.svgz);
    height: 64px; width: 100%;
    position: fixed; left: 0; right: 0; top: auto; bottom:0;
}

В другом случае, который, конечно, потребует, чтобы на клиенте был включен сценарий, и он немного мигает (из-за того, как это делается: событие прокрутки> операция dom> перерисовка), полный пример можно увидеть здесь .

Answer 2

Разве вы не можете просто использовать CSS?

#header_id {
    position: fixed;
    top : 0;
 }

Редактировать

Извините, меня бросил термин "объект". Я думал, что svg был заголовком для другого документа. Но я проверил , и в документах W3C говорится, что вы можете применить позиционирование CSS2 ко всему, кроме самого внешнего элемента. Дайте мне знать, если это так просто, как моя идея. Я хотел бы знать.

Answer 3

Вы можете создать и расположить несколько <svg> элементов, которые вы можете установить (по крайней мере, в сценарии из моего собственного опыта) на position:fixed, и это будет работать. Убедитесь, что ваша «плавающая» область SVG находится сверху в z-порядке.

Одно предостережение: Firefox отличается от "переходов по клику" на плавающих слоях SVG, подобных этим, в других браузерах. Firefox 3.6 соблюдает свойство pointer-events лучше, чем предыдущие версии Firefox. Другие по умолчанию разрешают переход по клику.

Answer 4

Это может или не может выходить за рамки ваших требований, просто мысли вслух.Вы можете поместить содержимое страницы в viewBox с полосой прокрутки svg.то есть:

<svg>
  <g id='header'>Header</g>
  <svg viewBox='0 0 800 600'>Page Content</svg>
  <g id='scrollbar'></g>
</svg>

Это будет означать много работы EMCAScript на полосе прокрутки.Но большая часть этого должна быть доступна на carto.net:

http://www.carto.net/papers/svg/samples/

Фактический видовой экран для viewBox может быть пропорционален с помощью тега аспекта.Я решил аналогичную проблему с верхним и нижним колонтитулом, чтобы остаться неизменным, и нашел лучшую производительность и гибкость, используя html-страницу с тремя документами svg в div с фиксированной позицией.Прекрасно работает во всех браузерах, действительно плавно изменяет размеры и корректно масштабируется при любом размере окна.