SVG, SVG'ye yerleştirilsin mi?

Bir SVG belgem var ve içine harici bir svg resmi eklemek istiyorum, örneğin:

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

("nesne" yalnızca bir örnektir - dış belge xhtml yerine SVG olacaktır).

Herhangi bir fikir? Bu mümkün mü? Veya logo.svg xml'yi dış SVG belgeme yapıştırmak benim için en iyisi mi?

Öğesini kullanın imageve SVG dosyanıza referans verin. Eğlenmek için aşağıdakileri kaydedin 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>

Veya alt svg'yi ana svg'ye şu şekilde gömebilirsiniz:

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

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

SVG'leri başka bir SVG'ye gömdüğünüzde şunu belirtmekte fayda var:

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

daha sonra gömülü SVG bir dikdörtgen alır belirli boyutlarda şekil .

Diğer bir deyişle, gömülü SVG'niz bir daire veya kare dışında bir şekil ise, o zaman şeffaflığı olan bir kare olur. Bu nedenle, fare olayları bu gömülü kareye hapsolur ve ana SVG'ye ulaşmaz. Buna dikkat edin.

Daha iyi bir yaklaşım, bir model kullanmaktır. Bir şekli, bir çemberi, bir kareyi veya hatta bir yolu doldurmak için.

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

Ardından kalıbı şu şekilde kullanın:

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

Artık fare etkinlikleriniz şeffaf resim karelerine takılıp kalmıyor!

<image>Etiketi kullanmanın gömülü dosyanın düşük kaliteli bir görüntüsünü verdiğini buldum . Ancak, aşağıdaki teknik işe yaradı (bir SVG dosyasını bir SVG dosyasının içine gömmek için - bir HTML sayfasında oluşturmak için gerekli değildir):

• SVG dosyasını bir metin düzenleyicide düzenleyin.

• Meta verilerin sonunu bulun:

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

• Bu satırı bu grup etiketinin arkasına ekleyin:

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

• Bu durumda, dosyaya OTHERFILE.svg'yi ve tüm katman1'i (ilk ve varsayılan katman) ekliyoruz.

• Bunu kaydedin ve ardından dosyayı Inkscape'te açın.

Bu teknik, her sayfada standart bir arka plan veya logo olması için kullanışlıdır. Dosyada ilk sıraya konarak, önce (ve dolayısıyla en altta) oluşturulacaktır. Bu özelliği ekleyerek de kilitleyebilirsiniz:

sodipodi:insensitive="true" 

Başka bir deyişle:

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

Not xlink:hrefolmuştur kullanımdan kaldırıldı , sadece kullanmak hrefyerine, örneğin

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

viewBox, widthVe height(bu yanıt) değerleri, örnekleme amacıyla yerleştirilmiştir (buna göre yerleşimini ayarlamak devamı ).

Yana <image> hisseleri benzer spec olarak <img>, belirtildiği gibi o, SVG stil desteklemez anlam Christiaan cevabı . Örneğin, svg şekil rengini yazı tipi rengiyle aynı olacak şekilde ayarlayan aşağıdaki css satırına sahipsem,

svg {
  fill: currentColor;
}

Yukarıdaki stil <image>kullanılırsa geçerli olmaz . Bunun için, Nick'in cevabında<use> gösterildiği gibi kullanmanız gerekir .

Cevabındaki not id="layer1"ve href="OTHERFILE.svg#layer1"değerler zorunludur .

Yani, idniteliği harici svg dosyasına eklemeniz gerekir, bu nedenle (değiştirilmiş) harici svg dosyasını kendiniz (web siteniz) veya başka bir yerde barındırmanız gerekir. Ortaya çıkan harici svg dosyası şuna benzer (nereye koyduğuma dikkat edin id):

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

İd değeri herhangi bir şey olabilir, bu örnekte "logo" kullanıyorum.

Bu svg'yi gömmek için,

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

Yukarıdaki svg'yi html'nizde satır içi olarak kullanırsanız, xmlns niteliğine ihtiyacınız yoktur (en azından svgo'dan bildiğim ).

SVG'me bir SVG yerleştirmem, aynı zamanda rengini değiştirmem ve dönüştürmeleri uygulamam gerekiyordu.

Yalnızca Firefox, iç içe yerleştirilmiş svg öğelerinde "dönüştürme" özelliğini destekler. <image> rengini değiştirmek de mümkün değildir. Bu yüzden ikisinin bir kombinasyonuna ihtiyaç vardı.

Sonunda yaptığım şey şuydu

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

Bu, en azından Firefox, Chrome ve Inkscape'de çalışır.

Bu, ana svg yanıtındaki alt svg ile aynı şekilde davranır, istisna olarak artık ona dönüşümler uygulayabilirsiniz.