Сохраните Объект SVG статичным при прокрутке
В моем веб-приложении я генерирую файл SVG, который содержит "заголовок", что я хотел бы сохранить видимым наверху окна, поскольку пользователь прокручивает изображение вниз.
Я могу думать о двух способах выполнить это, но ищу любые другие прекрасные идеи. Мои две мысли:
Генерируйте два отдельных SVGs, один являющийся "заголовком" и один являющийся содержанием и затем просто отображающий их в двух других HTML
<div>элементы, позволяя более низкому прокрутить. Мне не нравится эта идея, потому что я должен был бы генерировать два отдельных документа.Используйте ECMAScript в самом SVG и найдите способ плавать
<g>это содержит заголовок в верхней части страницы. Мне нравится это, потому что каждый раз, когда SVG просматривается, он должен работать, но я не уверен, как выполнить это и ценил бы любые указатели или примеры.
4 ответа
У меня есть пример первого случая здесь :
footer {
background: url(images/grasspat.svgz);
height: 64px; width: 100%;
position: fixed; left: 0; right: 0; top: auto; bottom:0;
}
Другой случай, который, конечно, потребует, чтобы у клиента был включен скрипт, и немного мерцает (из-за того, как это выполнено: событие прокрутки> операция dom> перерисовка), полный пример можно увидеть здесь .
Разве вы не можете просто использовать CSS?
#header_id {
position: fixed;
top : 0;
}
Редактировать
Извините, меня бросили термин объектом. Я думал, что SVG был заголовок для другого документа. Но я проверил , и документы W3C говорят, что вы можете применить позиционирование CSS2 к чему-либо, кроме внешнего элемента. Дайте мне знать, если это так же просто, как моя идея. Я хотел бы знать.
Это может или не может выходить за рамки ваших требований, просто подумайте вслух. Вы можете поместить содержимое страницы в 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 с фиксированной позицией. Идеально работает во всех браузерах, плавно меняет размер и правильно масштабируется при всех размерах окон.
Вы можете создать и расположить несколько элементов, которые вы можете установить (по крайней мере, в скрипте из моего собственного опыта) в position:fixed и это будет работать. Убедитесь, что ваша "плавающая" область svg находится сверху в z-порядке.
Одно предостережение: Firefox отличается от других браузеров в отношении "click-through" на плавающих слоях svg, подобных этому. Firefox 3.6 уважает свойство pointer-events лучше, чем предыдущие версии Firefox. В других браузерах по умолчанию разрешено прохождение по щелчку.