Ich möchte dies Fill SVG Element mit einem Hintergrundbild mit einem Offset , aber mit Raphael JS.
Bei der Anzeige eines Rechtecks mit einem Hintergrundbild ohne ist der Offset einfach.
%Vor%Der obige Code zeigt nur die obere linke Ecke des Bildes an. Ich möchte es verschieben und einen anderen Teil davon anzeigen. Wie kann ich es tun?
Ich würde vorschlagen, das Bild getrennt von der rect zu zeichnen. Wenn Sie den Strich benötigen, können Sie entweder ein ausgefülltes Rechteck hinter dem Bild zeichnen oder das Rechteck oben mit einem Strich und ohne Füllung zeichnen.
Das Bild wird mit Übersteuerung gezeichnet, um den gewünschten Teil auszuschneiden, und Sie können den Versatz des Bildes entweder mit img.translate(x,y) oder mit paper.image params:
Das obige funktioniert nur für rechteckiges Clipping (svg selbst unterstützt willkürliches Clipping über die Eigenschaft 'Clip-Pfad' ). Wenn Sie eine Musterfüllung wünschen, müssen Sie sich jetzt außerhalb dessen begeben, was Raphaël bietet. Am einfachsten ist es wahrscheinlich, Raphaël einfach zu erweitern, um dies zu tun, und ein anderes Fallback für die Browser zur Verfügung zu stellen, die Svg nicht unterstützen.
SVG Web scheint zumindest teilweise Unterstützung für SVG-Muster zu haben, wenn Sie nach etwas suchen, um so zu arbeiten ein Ersatz für alte Browser.
Das obige mit clip-rect funktioniert nur für Rechtecke - wenn Sie einen Hintergrund-Positions-Offset für ein path setzen müssen, gibt es einen relativ einfachen Weg:
M -Segment mit nur zwei Koordinaten hinzu. Dies ändert den Punkt, der als der Ursprung des Pfades betrachtet wird, wodurch die Position geändert wird, an der das Bild beginnt. Stellen Sie sich vor, Sie hätten einen dreieckigen Pfad definiert als M0,0 50,0 25,35Z . Wenn Sie das Hintergrundbild um 20 Pixel nach oben und um 5 Pixel nach oben versetzen möchten, fügen Sie M-20,-5 an den Anfang der Zeichenfolge an und geben Sie M-20,-5 M0,0 50,0 25,35Z an.
Hier ist eine Demo von genau dem:
Beachten Sie, dass der tatsächliche Hintergrund-Offset die Differenz zwischen den eingegebenen Werten und der oberen linken Begrenzungsbox des Pfads zum Zeitpunkt der Füllung ist. Wenn Sie beim Definieren des ursprünglichen Pfads sicherstellen können, dass dies 0,0 ist, wird das Leben einfacher.
Wenn Sie an denken, indem Sie eine Funktion oder ein benutzerdefiniertes Attribut definieren, das die Hintergrundposition im laufenden Betrieb übernimmt , z. B. mit element.getBBox () , um dem obigen Problem entgegenzuwirken - sei dir bewusst, dass es einen Fehler im VML-Modus gibt, was bedeutet, dass in IE8 zusätzliche M-Segmente aus dem Pfad geschrubbt werden, wenn du den Pfad aktualisierst mit .attr('path') .
Außerdem müssen Sie im SVG-Modus die Füllung aktualisieren, was bedeuten kann, dass Sie die relative Position fix .
Hier ist eine Demo eines benutzerdefinierten Attributs, das für das obige in allem außer IE8 funktioniert - klicken Sie auf die Form, um die Hintergrundposition zu aktualisieren - mit einigen fehlgeschlagenen Versuchen, es in IE8 zu arbeiten ... Ссылка
Tags und Links html image svg raphael background-image