Bir <svg> elemanının üst kapsayıcısına genişletilmesi veya daralması nasıl sağlanır?

Amaç, <svg>bu kap <div>ne kadar büyük veya küçük olursa olsun , elemanın üst kapsayıcısının boyutuna genişlemesini sağlamaktır, bu durumda a .

Kod:

<style>
    svg, #container{
        height: 100%;
        width: 100%;
    }
</style>

<div id="container">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
         <rect x="0" y="0" width="100" height="100" />
    </svg>
</div>

Bu problemin en yaygın çözümü, viewBoxözniteliği <svg>öğeye ayarlamak gibi görünüyor .

viewBox="0 0 widthOfContainer heightOfContainer"

Ancak, eleman içindeki elemanların <svg>önceden tanımlanmış genişliklere ve / veya yüksekliklere sahip olduğu durumlarda bu işe yaramıyor gibi görünmektedir . Örneğin <rect>, yukarıdaki koddaki öğenin genişliği ve yüksekliği açıkça ayarlanmıştır.

Dolayısıyla bariz çözüm, bu elemanlarda da% genişlik ve% yükseklik kullanmaktır. Ama bunun yapılması gerekiyor mu? Özellikle, <img src=test.svg >iyi çalıştığından ve açıkça belirlenmiş <rect>yükseklik ve genişliklerle sorunsuz bir şekilde genişler / daralır .

Gibi öğelerin <rect>ve buna benzer diğer öğelerin genişlik ve yüksekliklerinin yüzde olarak tanımlanması gerekiyorsa, Inkscape'de bunu <svg>belgeye sahip tüm öğelerin sabit boyutlar yerine yüzde genişlik, yükseklik vb. Kullanması için ayarlamanın bir yolu var mı? ?

viewBoxÇiziminizde büyüklüğünde kabın yüksekliği değildir. Daki tanımlama viewBoxŞu Verilerinizi tanımlamak sonra genişliğinde olmak 100 birim rect10 birim için. Bundan sonra, SVG'yi ne kadar büyük ölçeklendirirseniz ölçekleyin rect, görüntünün genişliği% 10 olacaktır.

Şöyle görünen bir SVG'ye sahip olduğumu varsayalım:

Ve onu bir div'e koymak ve div'i duyarlı bir şekilde doldurmasını istiyorum. Benim bunu yapma şeklim şu:

Önce SVG dosyasını inkscape gibi bir uygulamada açıyorum. Dosya-> Belge Özellikleri'nde, belgenin genişliğini 800px ve yüksekliğini 600px olarak ayarlıyorum (diğer boyutları seçebilirsiniz). Sonra SVG'yi bu belgeye sığdırdım.

Sonra bu dosyayı yeni bir SVG dosyası olarak kaydediyorum ve bu dosyadan yol verilerini alıyorum. Şimdi HTML'de sihri yapan kod aşağıdaki gibidir:

<div id="containerId">    
    <svg
    id="svgId" 
    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    version="1.1"
    x="0"
    y="0"
    width="100%"
    height="100%"
    viewBox="0 0 800 600"
    preserveAspectRatio="none">
       <path d="m0 0v600h800v-600h-75.07031l-431 597.9707-292.445315-223.99609 269.548825-373.97461h-271.0332z" fill="#f00"/>
    </svg>
</div>

Kabı dikey ve yatay olarak doldurmasını istediğimizden, SVG'nin hem genişlik hem de yüksekliğinin% 100'e ayarlandığını unutmayın, ancak viewBox'ın genişliği ve yüksekliği, inkscape'deki 800px X olan belgenin genişliği ve yüksekliği ile aynıdır. 600px. Yapmanız gereken bir sonraki şey, preserveAspectRatio'yu "yok" olarak ayarlamaktır. Bu özellik hakkında daha fazla bilgiye ihtiyacınız varsa, işte iyi bir bağlantı . Ve hepsi bu kadar.

Bir şey daha, bu kodun eski tarayıcılarda bile hemen hemen tüm büyük tarayıcılarda çalıştığı, ancak bazı android ve ios sürümlerinde tutarlı olması için bazı javascrip / jQuery kodu kullanmanız gerektiğidir. Belgeye hazırlama ve yeniden boyutlandırma işlevlerinde aşağıdakileri kullanıyorum:

$('#svgId').css({
    'width': $('#containerId').width() + 'px',
    'height': $('#containerId').height() + 'px'
});

Umarım yardımcı olur!

Son zamanlarda benim için işe yarayan şey , etiketinden ve tüm alt etiketlerden tüm height=""ve width=""öznitelikleri kaldırmaktır <svg>. Ardından, ana kabın yüksekliğinin veya genişliğinin bir yüzdesini kullanarak ölçeklendirmeyi kullanabilirsiniz.

@robertc haklıdır, ancak svg'nin svg, #container% 100 dışında herhangi bir şey için üssel olarak ölçeklenmesine neden olduğunu da fark etmeniz gerekir (bir kez #containerve bir kez svg).

Başka bir deyişle, her iki öğeye de% 50 h / w uygularsam, gerçekte% 50'nin% 50'si veya .5 * .5, yani 0,25 veya% 25 ölçeğe eşittir.

@Robertc'in önerdiği gibi kullanıldığında bir seçici iyi çalışıyor.

svg {
  width:50%;
  height:50%;
}

İPhone'unuz için Baş balyanızda kullanabilirsiniz:

"width=device-width"