ฝัง SVG ใน SVG?

ฉันมีเอกสาร SVG และฉันต้องการรวมภาพ svg ภายนอกไว้ในนั้นเช่น:

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

("object" เป็นเพียงตัวอย่าง - เอกสารภายนอกจะเป็น SVG แทนที่จะเป็น xhtml)

ความคิดใด ๆ ? เป็นไปได้หรือไม่? หรือเป็นสิ่งที่ดีที่สุดสำหรับฉันเพียงแค่ตบ logo.svg xml ลงในเอกสาร SVG ภายนอก

ใช้imageองค์ประกอบและอ้างอิงไฟล์ SVG ของคุณ เพื่อความสนุกสนานบันทึกสิ่งต่อไปนี้เป็น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>

หรือคุณสามารถฝัง svg ลูกใน svg หลักได้ดังนี้:

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

การสาธิต:
http://hitokun-s.github.io/old/demo/path-between-two-svg.html

เป็นมูลค่าการกล่าวขวัญว่าเมื่อคุณฝัง SVG ลงใน SVG อื่นด้วย:

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

จากนั้น SVG ที่ฝังไว้จะเป็นรูปสี่เหลี่ยมผืนผ้ารูปร่างตามขนาด

กล่าวคือหาก SVG ที่ฝังไว้ของคุณเป็นวงกลมหรือรูปร่างอื่นที่ไม่ใช่สี่เหลี่ยมก็จะกลายเป็นสี่เหลี่ยมที่มีความโปร่งใส ดังนั้นเหตุการณ์ของเมาส์จึงติดอยู่ในช่องสี่เหลี่ยมที่ฝังไว้และไปไม่ถึง SVG ระดับบนสุด ระวังเรื่องนั้น

แนวทางที่ดีกว่าคือการใช้รูปแบบ เพื่อเติมเต็มรูปร่างไม่ว่าจะเป็นวงกลมสี่เหลี่ยมหรือแม้แต่เส้นทาง

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

จากนั้นใช้รูปแบบดังนี้:

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

ตอนนี้เหตุการณ์เมาส์ของคุณไม่ติดอยู่ในสี่เหลี่ยมภาพโปร่งใส!

ฉันพบว่าการใช้<image>แท็กทำให้การเรนเดอร์ไฟล์ฝังตัวมีคุณภาพต่ำ อย่างไรก็ตามเทคนิคต่อไปนี้ใช้ได้ผล (ในการฝังไฟล์ SVG ภายในไฟล์ SVG - ไม่จำเป็นสำหรับการแสดงผลบนหน้า HTML):

• แก้ไขไฟล์ SVG ในโปรแกรมแก้ไขข้อความ

• ค้นหาจุดสิ้นสุดของข้อมูลเมตา:

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

• แทรกบรรทัดนี้หลังแท็กกลุ่ม:

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

• ในกรณีนี้เรารวม OTHERFILE.svg ไว้ในไฟล์และเลเยอร์ 1 ทั้งหมด (เลเยอร์แรกและเริ่มต้น)

• บันทึกสิ่งนี้แล้วเปิดไฟล์ใน Inkscape

เทคนิคนี้มีประโยชน์สำหรับการมีพื้นหลังหรือโลโก้มาตรฐานในทุกหน้า โดยการใส่ไว้ก่อนในไฟล์ไฟล์นั้นจะแสดงผลก่อน (และอยู่ด้านล่างสุด) คุณยังสามารถล็อกได้โดยเพิ่มแอตทริบิวต์นี้:

sodipodi:insensitive="true" 

กล่าวอีกนัยหนึ่ง:

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

หมายเหตุxlink:hrefได้รับการเลิกใช้เพียงแค่ใช้hrefแทนเช่น

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

viewBox, widthและheightค่า (ในคำตอบนี้) เป็นเพียงเพื่อวัตถุประสงค์ภาพประกอบปรับการจัดวางตาม ( อ่านรายละเอียดเพิ่มเติม )

เนื่องจาก<image> หุ้นสเปคที่คล้ายกันเป็น<img>ความหมายมันไม่สนับสนุนการจัดแต่งทรงผม SVG เป็นที่กล่าวถึงในคำตอบของ Christiaan ตัวอย่างเช่นหากฉันมีบรรทัด css ต่อไปนี้ที่กำหนดสีรูปร่าง svg ให้เหมือนกับสีฟอนต์

svg {
  fill: currentColor;
}

รูปแบบข้างต้นจะใช้ไม่ได้หาก <image>ใช้ สำหรับสิ่งนั้นคุณต้องใช้<use>ดังที่แสดงในคำตอบของ Nickคำตอบของนิค

บันทึก id="layer1"และhref="OTHERFILE.svg#layer1"ค่าในคำตอบของเขาเป็นข้อบังคับผลบังคับใช้

หมายความว่าคุณต้องเพิ่มไฟล์ idแอตทริบิวต์ให้กับไฟล์ svg ภายนอกดังนั้นคุณต้องโฮสต์ไฟล์ svg ภายนอก (แก้ไข) ด้วยตัวเอง (เว็บไซต์ของคุณ) หรือที่อื่น ไฟล์ svg ภายนอกที่ได้จะมีลักษณะดังนี้ (สังเกตว่าฉันใส่ไว้ที่ใดid):

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

ค่าของidอาจเป็นอะไรก็ได้ฉันใช้ "โลโก้" ในตัวอย่างนี้

ในการฝัง svg นั้น

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

หากคุณใช้ svg ข้างต้นเป็นแบบอินไลน์ใน html ของคุณคุณไม่จำเป็นต้องมีแอตทริบิวต์ xmlns (อย่างน้อยสิ่งที่ฉันรู้จากsvgo )

ฉันต้องการฝัง SVG ใน SVG แต่ยังเปลี่ยนสีและใช้การแปลง

Firefox เท่านั้นที่รองรับแอตทริบิวต์ "transform" บนองค์ประกอบ svg ที่ซ้อนกัน ไม่สามารถเปลี่ยนสีของ <ภาพ> ได้เช่นกัน ดังนั้นจึงจำเป็นต้องใช้ทั้งสองอย่างร่วมกัน

สิ่งที่ฉันทำมีดังต่อไปนี้

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

สิ่งนี้ใช้ได้กับ Firefox, Chrome และ Inkscape เป็นอย่างน้อย

สิ่งนี้จะทำงานเหมือนกับ svg ลูกในคำตอบ svg พาเรนต์โดยมีข้อยกเว้นว่าตอนนี้คุณสามารถใช้การแปลงกับมันได้