Skip to content

SVG’de Grafikleri Nasıl Döndüreceğinizi Öğrenin

4 de Nisan de 2021

The döndürmek SVG’deki (Ölçeklenebilir Vektör Grafikleri) işlevi, belirli bir görüntüyü döndürmek istediğiniz açıyı belirlemenize olanak tanır. Görüntüyü her iki yönde de döndürmek için çalışır. World Wide Web Konsorsiyumu (W3C), SVG’yi “iki boyutlu vektör ve karma vektör / raster grafikleri tanımlamak için XML’e dayalı bir dil olarak tanımlar. SVG içeriği biçimlendirilebilir, farklı görüntülere ölçeklenebilir çözünürlükler ve bağımsız olarak görüntülenebilir, HTML içeriğiyle karıştırılabilir veya diğer XML dillerinde XML ad alanları kullanılarak gömülebilir.SVG ayrıca dinamik değişiklikleri destekler; komut dosyası etkileşimli belgeler oluşturmak için kullanılabilir ve animasyonlar bildirime dayalı animasyon özellikleri kullanılarak gerçekleştirilebilir veya komut dosyası kullanarak. ”

Döndürme Hakkında

The döndürmek fonksiyon tamamen grafiğin açısı ile ilgilidir. Bir SVG görüntüsü tasarladığınızda, muhtemelen geleneksel bir açıda oturacak statik bir model oluşturursunuz. Örneğin, bir karenin X ekseni boyunca iki kenarı ve Y ekseni boyunca iki kenarı olacaktır. İle döndürmek, aynı kareyi elmasa dönüştürebilirsiniz. Tek bir efektle, tipik bir kutudan (web sitelerinde ortak bir öğe) bir tasarıma ilginç bir görsel çeşitlilik katan bir elmasa geçtiniz. Döndür ayrıca SVG’nin animasyon kapasitesinin bir parçasıdır. Örneğin, bir daire görüntülendiği gibi sürekli dönebilir. Bu hareket, ziyaretçinin deneyimini bir tasarımdaki kilit alanlara veya unsurlara odaklayabilir.

Döndür görüntüdeki bir noktanın sabit kalacağını varsayar. Kartona bir raptiye ile tutturulmuş bir kağıt parçası hayal edin; pin konumu sabit noktadır. Kağıdın bir kenarını tutup döndürürseniz, raptiye hareket etmez, ancak dikdörtgen döner. Bu nasıl döndürmek işlevi çalışır.

Sözdizimini Döndür

Kullanmak döndürmek, dönüş açısını ve sabit alanın koordinatlarını belirtin: transform = “döndür (45,100,100)”

Bu kodda dönüş açısı 45 derecedir. Orta nokta sonra gelir; bu örnekte, koordinatları x ekseninde 100 ve y ekseninde 100’dür. Merkez konum koordinatlarını girmezseniz, bunlar varsayılan olarak 0,0 olacaktır. Aşağıdaki örnekte, açı hala 45 derecedir, ancak merkez noktası belirlenmemiştir; bu nedenle, varsayılan değer 0,0 olacaktır. transform = “döndür (45)”

Varsayılan olarak, açı grafiğin sağ tarafına doğru gider. Şekli ters yönde döndürmek için, negatif bir değer belirtmek üzere bir eksi işareti kullanırsınız: transform = “rotate (-45)”

45 derecelik bir dönüş, açıların 360 derecelik bir daireye dayalı olduğu göz önüne alındığında, çeyrek dönüştür. Devrimi 360 olarak listelerseniz, görüntü değişmeyecektir çünkü onu tam bir daire içinde çeviriyor olacaksınız. Böylece, döndürmek görüntülerinizin açıları üzerinde tam kontrol sağlar.