webentwicklung-frage-antwort-db.com.de

SVG in SVG einbetten?

Ich habe ein SVG-Dokument und möchte ein externes svg-Bild darin einfügen, d. H.

<object data="logo.svgz" width="100" height="100" x="200" y="400"/>

("object" ist nur ein Beispiel - das äußere Dokument ist SVG und nicht xhtml).

Irgendwelche Ideen? Ist das überhaupt möglich? Oder ist es das Beste für mich, die logo.svg-xml einfach in mein äußeres SVG-Dokument zu kopieren?

68
Marcin

Verwenden Sie das Element image und verweisen Sie auf Ihre SVG-Datei. Speichern Sie zum Spaß folgendes als recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>
102
Phrogz

Oder Sie können child svg tatsächlich in übergeordnetes svg einbetten: 

<svg>
    <g>
        <svg>
            ...
        </svg>
    </g>
</svg>

demo:
http://hitokun-s.github.io/demo/path-between-two-svg.html

68
toshi

Es ist erwähnenswert, dass beim Einbetten von SVGs in ein anderes SVG mit:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

dann nimmt das eingebettete SVG eine rechteckige - Form mit den angegebenen Abmessungen an.

Das heißt, wenn Ihr eingebettetes SVG ein Kreis oder eine andere Form als ein Quadrat ist, wird es zu einem Quadrat mit Transparenz. Daher werden Mausereignisse in diesem eingebetteten Quadrat eingeschlossen und erreichen die übergeordnete SVG nicht. Achten Sie darauf.

Ein besserer Ansatz ist die Verwendung eines Musters. Um eine Form zu füllen, entweder einen Kreis, ein Quadrat oder sogar einen Pfad.

<defs>
 <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
   <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
 </pattern>
</defs>

Dann verwenden Sie das Muster wie folgt:

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

Jetzt bleiben Ihre Mausereignisse nicht in transparenten Bildquadraten hängen!

26
oabarca

Ich musste ein SVG in mein SVG einbetten, aber auch die Farbe ändern und Transformationen anwenden.

Nur Firefox unterstützt das Attribut "Transformation" für die geschachtelten SVG-Elemente. Das Ändern der Farbe von <Bild> ist ebenfalls nicht möglich. Daher war eine Kombination aus beiden erforderlich.

Was ich am Ende tat, war folgendes

<svg>
  <image x="0" y="0" xlink:href="data:image/svg+xml;base64,[base64 of nested svg]"></image>
</svg>

Dies funktioniert zumindest bei Firefox, Chrome und Inkscape.

Dies verhält sich genauso wie das untergeordnete svg in der übergeordneten svg-Antwort, mit der Ausnahme, dass Sie jetzt Transformationen darauf anwenden können.

1
Christiaan

Ich fand, dass die Verwendung des <image>-Tags zu einem Rendering der eingebetteten Datei von geringer Qualität führte. Die folgende Technik hat jedoch funktioniert (zum Einbetten einer SVG-Datei in eine SVG-Datei - nicht unbedingt für das Rendern auf einer HTML-Seite):

  • Bearbeiten Sie die SVG-Datei in einem Texteditor.

  • Finden Sie das Ende der Metadaten:

    </metadata>
      <g
       id="layer1"
       inkscape:groupmode="layer"
       inkscape:label="Layer 1">
    
  • Fügen Sie diese Zeile nach diesem Gruppentag ein:

    <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />
    
  • In diesem Fall fügen wir OTHERFILE.svg in die Datei und alle Layer1 (die erste und Standardebene) ein.

  • Speichern Sie diese und öffnen Sie die Datei in Inkscape.

Diese Technik ist nützlich, wenn auf jeder Seite ein Standardhintergrund oder -logo vorhanden ist. Wenn Sie es zuerst in die Datei einfügen, wird es zuerst (und damit am Ende) gerendert. Sie können es auch sperren, indem Sie dieses Attribut hinzufügen:

sodipodi:insensitive="true" 

Mit anderen Worten:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />
0
Nick Gammon