In meiner Webanwendung erzeuge ich eine SVG-Datei, die eine "Kopfzeile" enthält, die ich oben im Fenster sichtbar halten möchte, während der Benutzer das Bild herunter scrollt.
Ich kann mir zwei Möglichkeiten vorstellen, dies zu erreichen, aber ich suche nach anderen guten Ideen. Meine zwei Gedanken sind:
Generieren Sie zwei separate SVGs, wobei einer der Header und einer der Inhalt ist und diese dann einfach in zwei verschiedenen HTML <div> -Elementen angezeigt werden, so dass der untere scrollen kann. Ich mag diese Idee nicht, weil ich zwei separate Dokumente erstellen müsste.
Nutzen Sie EMCAScript im SVG selbst und finden Sie eine Möglichkeit, das <g> , das die Kopfzeile enthält, oben auf der Seite freizugeben. Ich mag das, denn wenn das SVG angezeigt wird, sollte es funktionieren, aber ich bin nicht sicher, wie das zu erreichen ist und würde mich über Hinweise oder Beispiele freuen.
Ich habe ein Beispiel für den ersten Fall hier :
Fußzeile { Hintergrund: URL (images / grasspat.svgz); Höhe: 64px; Breite: 100%; Position: fixiert; links: 0; rechts: 0; oben: automatisch; unten: 0; }
Der andere Fall, der natürlich erfordert, dass der Client das Skript aktiviert hat und etwas flimmert (wegen der Art, wie es gemacht wird: scroll-Ereignis & gt; dom-Vorgang & gt; Repaint), ein vollständiges Beispiel kann gesehen werden hier .
Können Sie nicht einfach CSS verwenden?
%Vor%Tut mir leid, ich wurde von dem Begriff Objekt geworfen. Ich dachte, die Svg war der Header für ein anderes Dokument. Aber ich checkte und die W3C-Dokumentation sagt, dass Sie CSS2-Positionierung auf alles außer dem äußersten Element anwenden können . Lass es mich wissen, wenn es so einfach ist wie meine Idee. Ich würde es gerne wissen.
Dies kann oder kann nicht außerhalb des Umfangs Ihrer Anforderungen liegen, nur laut denken. Sie könnten den Seiteninhalt in eine viewBox mit einer svg Bildlaufleiste legen. zB:
%Vor%Dies würde bedeuten, dass viel EMCAScript an der Bildlaufleiste arbeitet. Aber das meiste sollte bei carto.net verfügbar sein:
Das tatsächliche Ansichtsfenster für die viewBox kann mit dem aspect-Tag ebenfalls proportional gehalten werden.
Ich habe ein ähnliches Problem mit Header und Footer angepackt, um fest zu bleiben und die beste Leistung und Flexibilität zu finden, indem ich eine HTML-Seite mit drei Svg-Dokumenten in festen Positions-Divs verwende. Funktioniert perfekt in allen Browsern, passt sich wirklich an alle Fenstergrößen an und skaliert korrekt.
Sie können mehrere <svg> -Elemente erstellen und positionieren, die Sie (zumindest im Skript aus eigener Erfahrung) als position:fixed festlegen können und dies funktioniert. Stellen Sie sicher, dass Ihr "schwebender" Svg-Bereich in der Z-Reihenfolge oben ist.
Ein Vorbehalt: Firefox unterscheidet sich in Bezug auf das "Durchklicken" auf schwebenden Svg-Ebenen wie diese anderen Browser. Firefox 3.6 respektiert die Eigenschaft pointer-events besser als frühere Versionen von Firefox. Die anderen verwenden standardmäßig Click-through.
Tags und Links javascript html svg
