SORU
21 EKİM 2013, PAZARTESİ


Nasıl üst konteynerinde ile svg bir ölçek yapabilir miyim?

Boyutu, yerel olmayan olduğunda satır içi svg bir elemanın içeriğini ölçekli yapmak istiyorum. Tabii ki ayrı bir dosya olarak var ve bu şekilde çekebiliriz.

index.html: <img src="foo.svg" style="width: 100%;" />

foo.svg: <svg width="123" height="456"></svg>

Ancak, SVG sokmak için ek CSS stilleri eklemek istiyorum, bir tane harici bağlantı bir seçenek değil. Nasıl ınline SVG bir ölçek yapabilirim?

CEVAP
21 EKİM 2013, PAZARTESİ


Belirttiğiniz koordinatlar içinde SVG görüntü bağımsız olarak ölçekli boyutu görüntü kullanın viewBox özniteliğinde SVG elemanı tanımlamak için ne sınırlama kutusunu görüntü içinde koordinat sistemi görüntü ve kullanım width height öznitelikleri tanımlamak ne genişliği ya da yüksekliği ile ilgili içeren sayfa.

Eğer varsa örneğin,:

<svg>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

20 piksel Üçgen ile bir 10px olarak render eder

10x20 triangle

Eğer sadece genişliği ve yüksekliği ayarlayın, SVG öğenin boyutunu değiştirmek, ama Üçgen değil ölçek:

<svg width=100 height=50>
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

10x20 triangle

Eğer siz bir görünüm kutusu, bu neden bu dönüşüm görüntü gibi belirli kutusu (koordinat sistemi resim) ölçekli kadar uyum içinde verilen genişlik ve yükseklik (koordinat sistemi sayfası). Örneğin, ölçekte üçgeni tarafından 50px 100px olmak için:

<svg width=100 height=50 viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

Eğer HTML görüntüleme çerçevesinin genişliğini arttırmak istiyorsanız:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x150 triangle

Varsayılan olarak, en boy oranı korunur unutmayın. Eğer öyleyse, belirttiğiniz unsuru olmalı genişliği 100%, ama yükseklik 50px, olur aslında sadece büyütmek için yüksekliği 50px (sürece çok dar pencere):

<svg width="100%" height="50px" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

100x50 triangle

Eğer gerçekten yatay olarak uzatmak istiyorsanız, preserveAspectRatio=none ile korunması: En-Boy oranı devre dışı bırakın

<svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none">
    <polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" />
</svg>

300x50 triangle

(Not Bu arada benim örnekler kullanıyorum sözdizimi bu işler için HTML gömme, dahil etmek için örnek bir görüntü StackOverflow ben yerine yerleştirmesi içinde başka bir SVG, çok ihtiyacım var kullanın geçerli XML sözdizimi)

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • 365multimedia

    365multimedi

    26 ŞUBAT 2009
  • AndroidSale

    AndroidSale

    17 NİSAN 2011
  • SellerDp

    SellerDp

    27 EKİM 2009