Osadzić SVG w SVG?

Mam dokument SVG i chciałbym dołączyć do niego zewnętrzny obraz svg, czyli coś takiego:

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

(„obiekt” to tylko przykład - zewnętrzny dokument będzie SVG zamiast xhtml).

Jakieś pomysły? Czy to w ogóle możliwe? A może najlepiej byłoby po prostu włożyć plik xml logo.svg do mojego zewnętrznego dokumentu SVG?

Użyj imageelementu i odnieś się do pliku SVG. Dla zabawy zapisz jako recursion.svg:

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

Lub możesz faktycznie osadzić dziecko svg w nadrzędnym pliku svg w ten sposób:

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

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

Warto wspomnieć, że kiedy osadzasz pliki SVG w innym SVG z:

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

następnie osadzony SVG przyjmuje prostokąt kształt o określonych wymiarach.

Oznacza to, że jeśli osadzony plik SVG jest okręgiem lub jakimś innym kształtem niż kwadrat, staje się kwadratem z przezroczystością. Dlatego zdarzenia myszy zostają uwięzione w tym osadzonym kwadracie i nie docierają do nadrzędnego pliku SVG. Uważaj na to.

Lepszym podejściem jest użycie wzorca. Aby wypełnić kształt, albo okrąg, kwadrat, albo nawet ścieżka.

<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>

Następnie użyj wzoru w ten sposób:

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

Teraz zdarzenia myszy nie utkną w przezroczystych kwadratach obrazu!

Zauważyłem, że użycie <image>tagu dało niskiej jakości renderowanie osadzonego pliku. Jednak następująca technika zadziałała (aby osadzić plik SVG w pliku SVG - niekoniecznie do renderowania na stronie HTML):

• Edytuj plik SVG w edytorze tekstu.

• Znajdź koniec metadanych:

  </metadata>
    <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
  

• Wstaw ten wiersz po tym tagu grupy:

  <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />
  

• W tym przypadku dołączamy INNY PLIK.svg do pliku i całą warstwę 1 (pierwsza i domyślna warstwa).

• Zapisz to, a następnie otwórz plik w Inkscape.

Ta technika jest przydatna w przypadku standardowego tła lub logo na każdej stronie. Umieszczając go jako pierwszy w pliku, zostanie on wyrenderowany jako pierwszy (a więc na dole). Możesz go również zablokować, dodając ten atrybut:

sodipodi:insensitive="true" 

Innymi słowy:

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

Notatka xlink:hrefzostała wycofana , po prostu użyj hrefzamiast niej, np

<svg viewBox="0 0 512 512">
  <image width="512" height="512" href="external.svg"/>
</svg>

viewBox, widtha heightwartości (w tej odpowiedzi) służą jedynie celom ilustracyjnym, odpowiednio dostosuj układ ( czytaj więcej ).

Od <image> akcji podobnej specyfikacji , co <img>, co oznacza, że nie obsługuje SVG stylizacji, jak wspomniano w odpowiedzi Christiaan użytkownika . Na przykład, jeśli mam następującą linię css, która ustawia kolor kształtu svg na taki sam jak kolor czcionki,

svg {
  fill: currentColor;
}

Powyższy styl nie miałby zastosowania, gdyby <image>został użyty. W tym celu musisz użyć <use>, jak pokazano w odpowiedzi Nicka .

Uwaga id="layer1"i href="OTHERFILE.svg#layer1"wartości w jego odpowiedzi są obowiązkowe .

Oznacza to, że musisz dodać idatrybut do zewnętrznego pliku svg, więc musisz hostować (zmodyfikowany) zewnętrzny plik svg samodzielnie (twoja strona internetowa) lub gdzie indziej. Wynikowy zewnętrzny plik SVG wygląda następująco (zwróć uwagę, gdzie umieściłem id):

<svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <path d="..."/>
</svg>

Wartość id może być dowolna, w tym przykładzie używam „logo”.

Aby osadzić ten plik svg,

<svg viewBox="0 0 512 512">
  <use href="edited-external.svg#logo"/>
</svg>

Jeśli używasz powyższego svg jako wbudowanego w swoim html, nie potrzebujesz atrybutu xmlns (przynajmniej tego, co wiem z svgo ).

Musiałem osadzić SVG w moim SVG, ale także zmienić jego kolor i zastosować transformacje.

Tylko Firefox obsługuje atrybut „transform” w zagnieżdżonych elementach svg. Zmiana koloru <image> również nie jest możliwa. Potrzebna była więc kombinacja obu.

Skończyło się na tym, że zrobiłem następujące

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

Działa to przynajmniej na przeglądarkach Firefox, Chrome i Inkscape.

Zachowuje się tak samo, jak podrzędny plik SVG w odpowiedzi nadrzędnego pliku SVG, z wyjątkiem tego, że można teraz zastosować do niego transformacje.