SVG gradyan uygulaması


11

Bu tür bulanık degradeyi bir SVG'de yeniden oluşturmak mümkün müdür?

resim açıklamasını buraya girin

Yanıtlar:


13

Evet ve hayır.

Inkscape'de degrade kafes oluşturmak ve bunu bir SVG olarak kaydetmek mümkündür. Ancak tarayıcılarda kullanılan SVG standartları henüz degrade kafesleri desteklememektedir. Bu gelecekte değişebilir, ancak şu an için hayır.

resim açıklamasını buraya girin

Tarayıcılarda çalışan başka bir yöntem, birkaç katı nesne eklemek, onları bulanıklaştırmak ve bir kırpma maskesine koymaktır. Bu hala saf bir vektör çözümü, rasterleştirilmiş değil.

resim açıklamasını buraya girin

İsterseniz tarayıcılarda çalışan sürümün SVG'si.

Düzenleme : SVG'nin yukarıdaki bağlantısı artık mevcut değil, bu yüzden kaldırdım.


Çok havalı! Bağlantıdaki SVG, cevabınızda verilen ek gibi görünmüyor, ancak ... çok daha hafif görünüyor. Bunun bir sebebi var mı?
Jared Garcia

@JaredGarcia Neden bilmiyorum - ekran görüntüsüm SVG ile Inkscape'teki bilgisayarımla tam olarak eşleşiyor - ancak Inkscape'in en son sürümünü kullandığınızdan emin olun - şimdi 0.92 sürümünde
Billy Kerr

Ah, doğrudan bu indirme bağlantısından mobil cihazımda tarayıcıda görüntülüyordum. Inkscape'te açacağım ve kontrol edeceğim.
Jared Garcia

1
@JaredGarcia bunu düzgün bir şekilde cevaplanabilmesi için yeni bir soru olarak yayınladı.
Andrew T.

1
Tarayıcılarda bulanıklaşma gerçekten pahalıdır. Aynı efekti, arka plan gradyanlarını katmanlayarak elde edebilirsiniz. Bunlar bile canlandırılabilir. Modern tarayıcılarda ekstra efekt için arka plan karışımı modunu kullanabilirsiniz.
PieBie

2

Illustrator ve Inkscape'te Degrade kafes olarak yapılabilir. Eski Illustrator'da SVG olarak kaydedildiğinde, bitmap görüntüsüne dönüştü. Açıkçası Illustator bunu yaklaşık 6 yıl önce biliyordu, ancak SVG dili bilmiyordu.

Inkscape'te Inkscape SVG olarak değil, düz SVG olarak kaydedildiğinde, degrade kafes olarak kaldı ve SVG dosyasını bir metin düzenleyicisiyle açarak komut meshgradient olduğunu ortaya koydu. Kod pasajına bakın

resim açıklamasını buraya girin

Standartları bilmeden "En azından Inkscape'in sade SVG'sinde uygulandı" diyebilirim.

Umarım birisi SVG geliştirme durumu farkında programcı kesin bir şey söyler.


2
Kodu doğrudan uygun kod biçimlendirmesiyle buraya ekleyebilirsiniz. Ekran görüntüsü göndermeye gerek yok.
Wrzlprmft

Ne yazık ki, Inkscape'in degrade kafesleri henüz Google Chrome'da veya Firefox'ta desteklenmemektedir.
Billy Kerr

Svg kodunu gönderebilir misiniz
Jared Garcia

@JaredGarcia Bende yok. Doğru görünümü verdiğini görmek için sadece 25 düğüm 10 doldurdum. Kendiniz yapabilirsiniz. Görüntüyü Inkscape'e aktarın, aynı boyutta bir kare yapın, dolgu türünü ayarlayın = degrade kafes, kafes aracıyla 3 satır ve sütun daha ekleyin, düğüm aracı düğümleri tek tek seçerek ve renk seçici ile içe aktarılan görüntüden renk. Düz SVG olarak kaydedin, kodu görmek için Win Not Defteri'nde açın.
user287001

1

Amacınız hafif, ölçeklenebilir bir kafes gradyanına sahip olmaksa, bu yöntemi deneyebilirsiniz:

https://peterhrynkow.com/performance/2019/01/13/blowing-up-images-to-make-them-small.html

Bu vektör değil, ancak dosya boyutu süper küçük olduğundan ve görüntü sonsuz ölçeklendiğinden de olabilir.


Sizi burada görmek için GDSE - glaf'a hoş geldiniz ! Lütfen tura bir göz atın ve Nasıl Sorulur ve soruları nasıl cevaplayacağımızı sormak istediğimizi öğrenin . Yardım merkezine bakarken genel davranış kodlarına da bakmak muhtemelen iyi bir fikirdir Cevabınız paylaştığınız uygulanabilirlik açısından iyi bir cevaptır, ancak burada GDSE'de bağlantıları sadece referans olarak kullanmayı tercih ediyoruz veya bağlantılar kolayca değiştiğinden ya da kolayca kaybolduğundan kaynakları bağlamak için: yanıtladığınız içerikte bağlı olduğunuz içeriği özetleyebilir misiniz?
GerardFalla
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.