<object> etiketiyle gömülü inatçı bir SVG'yi nasıl ölçeklendirebilirim?

114

Bunu belirten widthve heightbunun viewboxgibi bazı SVG dosyalarım var :

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

ama bunları tarayıcıda karar verdiğim bir boyutta nasıl görüntüleyebilirim? Daha küçük olmasını istiyorum ve denedim:

<object width="400" data="image.svg"></object>

ama sonra görünür kaydırma çubukları alıyorum.

Ben sete SVG dosyalarını değiştirmek eğer çalışır widthve heighthiç 100%yerine, ama ne olursa olsun SVG dosyasında kullanılan hangi boyuttaki HTML'lerinde boyutuna karar istiyoruz. Mümkün mü ?

html svg

— Zitrax
kaynak

Kafam karıştı, son cümle aradığınız çözüm gibi mi okunuyor? SVG genişliğini / yüksekliğini% 100 /% 100 olarak ayarla, içine çizilecek alanı tanımlamak için HTML'ye bırakılsın mı?

— işaretleyin

3

Sorun şu ki, svg dosyalarını oluşturmak için kullandığım kitaplıkta bunu değiştirmenin bir yolunu bulamadım. Ve bunu html'den geçersiz kılabilirsem bana mantıklı gelir. Bu yüzden temelde svg dosyalarını değiştirmekten başka bir çözüm olup olmadığını merak ediyorum.

— Zitrax

161

Bunu <svg>başarmak için etikete "preserveAspectRatio" ve "viewBox" nitelikleri ekleyebilirsiniz .

.Svg dosyasını bir düzenleyicide açın ve <svg>etiketi bulun . bu etikete aşağıdaki özellikleri ekleyin:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

ViewBox için {width} ve {height} 'yi bazı varsayılanlarla değiştirin. SVG etiketinin "width" ve "height" özniteliklerinden değerleri kullandım ve çalışıyor gibiydi.

SVG'yi kaydedin ve artık beklendiği gibi ölçeklenmelidir.

Bu bilgiyi burada buldum:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

— Jim Keller
kaynak

2

# bunu eklemek için ihtiyacınız olan her şeyi koruyunAspectRatio = "xMinYMin meet"

— samccone

4

@samccone: Bu preserveAspectRatio="xMinYMin meet"benim için yeterli değilmiş gibi görünüyor . Ayrıca viewBoxcevapta belirtildiği gibi bir de sağlamam gerekiyordu . Yazık!

— Frerich Raabe

1

Ayrıca preserveAspectRatio="none"svg'yi keyfi şekillerde uzatmak istiyorsanız da yapabilirsiniz .

— Matt Crinklaw-Vogt 07

5

Benimle aynı soruna düşmeyin: "viewbox"! = "ViewBox" :)

— Dr.Ü

Ek olarak, bu cevapta belirtildiği 100%gibi gerçek genişlik ve yükseklik özelliklerini ayarlamak zorunda kaldım .

— ComFreek

35

2009'da bunu tekrar sorduğumda burada verilen cevapların hiçbiri benim için işe yaramadı. Şimdi yine aynı sorunu yaşadığımdan, <img>etiketi ve genişliği bir svg ile birlikte kullanmanın iyi çalıştığını fark ettim .

<img width="400" src="image.svg">

— Zitrax
kaynak

6

Bu, diğer seçeneklerden çok daha basit! Merak eden biri varsa, işte hangi tarayıcıların <img> etiketlerindeki SVG'leri işleyebileceğini gösteren bir tablo .

— dimo414

5

SVG'de köprü yoksa bu en iyi yol olabilir, aksi takdirde img yetersizdir ve yine de embed gibi alternatifler kullanılmalıdır.

— sdupton

12

Kullandığınızda <img>, bağlantılar, javascript vb.

— İle

5

Küçük: img öğesi kendi kendine kapanmalıdır, yani <img width="400" src="image.svg"/>.

— Jan Aagaard

4

@JanAagaard: XHTML dışında img etiketini kapatmak gerekli değildir .

— Peter V.Mørch

9

JavaScript kullanarak gömülü svg'ye ulaşabilirsiniz:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Svg'nizde zaten bir viewBox olduğundan, Firefox, viewBox'taki 576 piksel genişliğini belgenizdeki 400 piksel genişliğine ölçeklemelidir. Diğer svg'ler, reklamı yapılan genişlik ve yükseklikten türetilen yeni bir viewBox'tan yararlanabilir (bunlar genellikle aynı sayılardır). Diğer tarayıcılar farklı svg ayarlarından yararlanabilir.

— joeforker
kaynak

1

Bu bana verdi:Security error: attempted to read protected variable

— Zitrax

1

Svg, web sayfanızla aynı alanda mı barındırılıyor?

— joeforker

1

Değil (localhost'tan dışarıya), bu yüzden muhtemelen öyle, ancak daha basit olduğu için aşağıdaki cevabımı kullandım.

— Zitrax

9

<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img / logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Bu kurulum benim için çalıştı.

— H Titan
kaynak

Bu aslında oldukça iyi çalışıyor! Gerçekten önemli olan şey aslında tanımlamaktır viewBox="0 0 640 80". Görünüşe göre bu tanımlanmamışsa, gerçekten ölçeklendiremezsiniz veya örneğin, width: 100%vb. Kullanarak CSS'nin sizin için ölçeklendirmesine izin veremezsiniz

— Igor

8

İPad'deki iOS'un bir <object>etiketteki SVG görüntülerini doğru şekilde yeniden boyutlandırmadığı bir sorunla karşılaştım .

CSS stili, <object>kabın boyutunu artırır veya azaltır , ancak içindeki görüntü değiştirilmez (iPad'de, iOS 7'de).

SVG görüntüleri Adobe Illustrator'dan dışa aktarıldı ve çözümün burada genişliği ve yüksekliği değiştirdiği ortaya çıktı:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

ile:

width="100%" height="100%"

Ben kullanmak için gerekli <object>çünkü etiketi <img>etiketi şu anda SVG en içinde eşlemli görüntüleri gömme desteklemez.

— Andrew Swift
kaynak

Bu, özellikle satır içi SVG'niz varsa ve <img etiketi kullanmıyorsanız doğru yanıttır! Mükemmel!

— Greg Ellis

5

Eksik görünüm kutusunu ayarlayın ve svg etiketinde ayarlanan yükseklik ve yükseklik özelliklerinin yükseklik ve genişlik değerlerini doldurun
Sonra tarafından basitçe resmi ölçek yükseklik ve genişliğini ayarlayarak için istenen yüzde değerlerinin. İyi şanslar.
PreserveAspectRatio = "x200Y200 meet ile sabit bir en boy oranı ayarlayabilirsiniz, ancak bu gerekli değildir

Örneğin

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

— Lorenz Lo Sauer
kaynak

3

Tarayıcının SVG'yi yeniden boyutlandırması için CSS kullanın! Şöyle: <object style="width:30%"> Daha fazla ayrıntı için http://www.vlado-do.de/svg_test/ adresine bakın. Ayrıca yerel olarak genişliği ve yüksekliği "pt" olarak verilen bir SVG ile denedim. Firefox'ta iyi çalışıyor.

— Vlado
kaynak

1

Hadi görelim. SVG'de hafızamı tazelemek zorunda kaldım, bu yıllarda pek kullanmadım.

Bugün bulduğuma göre, nesnelerin boyutlarını birimsiz belirtirseniz, sabit bir boyuta sahip oldukları görülüyor (piksel olarak, sanırım). Görünüşe göre, SVG'yi yeniden boyutlandırdığınızda bunları yeniden boyutlandırmanın bir yolu yoktur (yalnızca görüntü alanı / tuval boyutunu değiştirir).

Belirtildiği gibi, SVG'nin boyutunu yüzde olarak belirtmedikçe VEYA bir viewBox belirtmediğiniz sürece (örn. ViewBox = "0 0 600 500").

Şimdi, dışa aktarılan SVG'yi değiştirmenin bir yolu yoksa, korkarım şansınız yok. Hangi kütüphaneyi kullanıyorsunuz?

— PhiLho
kaynak

Matplotlib'deki svg arka ucu. Set_figwidth (val) gibi işlevleri denedim ama işe yaramıyor, ama bu kitaplığa pek aşina olmadığım için yanlış işlevlere bakıyor olabilirim.

— Zitrax

1

İşte Jim Keller'in cevabına dayanan QueryPath kullanan bir PHP çözümü .

QueryPath yüklendikten sonra svg komut dosyanızı işleve aktarın.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}

— Dieter Gribnitz
kaynak