Bu biraz ezoterik bir şey, sadece bir kez kendim yapmam gerekiyordu ve kafa karıştırıcı buldum, bu yüzden üzerine bütün bir video yapacağımı düşündüm.
Mesele şu ki, SVG'de her şey bir değil . harika çünkü her şey olabilir. Ancak sözdizimi diğer şekillerin hepsinden biraz daha karmaşıktır. Yani (belki bu nedenle?) Illustrator, her zaman en yakın uygun öğeyle SVG'deki şekilleri çıkarır. Dikdörtgenler, yalnızca düz çizgilerden oluşan diğer şekiller a veya açık bir şekil ise a , vb.
Bu şekiller için DOM yöntemlerinin farklılık göstermesi dışında bu iyi olur. Yol öğesinin, yolun getTotalLength()ne kadar uzun olduğunu bilmenizi sağlayan bir yöntemi vardır . Bu oldukça havalı ve bazen yararlıdır, ancak bunu yalnızca başka bir öğe üzerinde yapamazsınız .
Bu uzunluğu bilmek istemenizin bir nedeni, onu şekil "kendini çizecek" şekilde canlandırmayı planlamanızdır - havalı, küçük bir tasarım efekti (örnekler koleksiyonu). Bunu CSS'de yapabilirsiniz, ancak her seferinde mükemmel mesafeyi canlandırması için bu CSS'yi uygulamak için biraz JavaScript kullanmak güzel.
Diyelim ki bu çizim efektini yapmak istiyorsunuz, ancak şekil bir olduğundan JavaScript başarısız oluyor. Bu çokgeni görsel olarak değiştirmeden, üzerine bezier tutamacı olan bir nokta ekleyerek yola dönüştürebilirsiniz. Olduğu gibi, Kalem aracıyla tıklayın ve tutamaçların ortaya çıkması ve tutamaçları zaten orada olan çizgi boyunca hizalaması için sürükleyin. Bu noktanın varlığı onu çıktıda yapacaktır .
Bunu çok yaparsanız, işe yarayan ve gereksiz noktayı gerektirmeyen Poly2Path adında bir araç var.