Bir nesneyi SVG belgesinde nasıl hizalarsınız?

Bir grubun veya belgenin sağ kenarına göre SVG'deki bir nesneyi (örneğin, rect) hizalamanın bir yolu var mı? Tüm belge genişliğini artırdığımda, ancak nesnenin sağa hizalı kalması için X konumunu artırdığımda, nesnenin boyutunu korumasını istiyorum. Bir yol arıyorduBir nesneyi SVG belgesinde nasıl hizalarsınız?

Selamlar,

kaynak

2010-12-23 noober

genişlik =% 100 olan bir svg dosyasının sağa < g> elemanı yüzer. Bu yüzden görüntüyü ölçeklendirebilir ve < g> öğem, ölçeklendirme yapılmadan sağa yapışacaktır. İşte

buldum budur:

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" 
    baseProfile="full" 
    width="100%" 
    height="100%"> 

    <svg viewBox="0 0 300 300" width="100%" height="300px" 
     preserveAspectRatio="xMaxYMin meet"> 
     <g transform="skewX(45)" style="fill:red;"> 
      <rect x="0" y="0" height="100%" width="20px" /> 
      <rect x="270" y="0" height="100%" width="20px" /> 
     </g> 
    </svg> 
</svg>

hüner doğru sınırına sadık istediğiniz, sizin eleman yerleştirmek bir < svg> etiketi, kullanmaktır. Sonra < svg> -etiket Aynı şekilde (xMaxYMin)

preserveAspectRatio="xMaxYMin meet"

iç unsurları ölçekli ve en az onların maksimum ve y x değerleri olduğuna, bu yüzden onları taşımak için ortalamak edemez söylemek o ...

kaynak: http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

kaynak

2011-06-12 15:34:24 kulpae

başlangıçta aynı soru vardı ve kulpae cevabını sevdim. Benim için sorun, yine de, sol kaydırma ve sağa kaydırma için sağa hizalanmış bir düğme ve kulpae's içinde iç (viewBoxed) svg için sol hizalanmış bir düğme ile SVG içinde bir kaydırıcı tipi arabirim yapmaya çalışıyorum oldu örnek, kaydırıcının tüm genişliğini alacaktır, bu nedenle, kaydırıcının içeriğinin tıklatma olaylarını almasını engelleyecektir.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1" 
    width="100%" height="100%" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 

    <svg id="rightAlign" x="100%" y="0" width="0" height="200" style="overflow: visible;"> 
     <rect id="rightBtn" width="50" height="200" x="-50" y="0" fill="#ff0000"></rect> 
    </svg> 
    <svg id="leftAlign" x="0" y="0" width="0" height="200" style="overflow: visible;"> 
     <rect id="leftBtn" width="50" height="200" x="0" y="0" fill="#ff0000"></rect> 
    </svg> 
</svg>

kaynak

2014-06-07 02:42:26 Shabs

metinle Bu işlem nasıl iyi? Metnin ne kadar geniş olacağını önceden bilmiyorum. – posfan12

@ posfan12 Metni doğru hizalamaya çalışıyorsanız, muhtemelen genişliği bildiğiniz bir kap içine koymanız gerekecektir. Söz konusu kapsayıcı içindeki metni, metin bağlantısı olan https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor ile sağa hizalayabilirsiniz. – Shabs

Necromancing:

Çözümümün düğmesi için negatif bir X yer elemanı ile% 100 bir X yer iç içe svg elemanı kullanılır.
çeşitli şekilde uyum:

sol üst

preserveAspectRatio="xMinYMin meet"

sağ üst:

preserveAspectRatio="xMaxYMin meet"

sol alt

preserveAspectRatio="xMinYMax meet"

sağ alt

preserveAspectRatio="xMaxYMax meet"

Örnek:

<svg xmlns="http://www.w3.org/2000/svg" 
    viewBox="0 0 2560 1600" preserveAspectRatio="xMaxYMin meet">

kaynak

2017-11-21 09:54:22

Bir nesneyi SVG belgesinde nasıl hizalarsınız?

cevap

İlgili konular