SVG dolgu rengi saydamlığı / alfa?

416

SVG dolgu renklerinde saydamlık veya alfa düzeyi ayarlamak mümkün müdür?

Ben (onu değişen dolgu etiketine iki değeri ekleyerek denedim fill="#044B94"kadar fill="#044B9466"), ancak bu işi yapmaz.

— Ollie Cam
kaynak

İlgilenen herkes için, boş bir dolgu üzerinde tıklama alma: bkz : “hiçbiri dolgu” SVG etkinlikleri Onclick Algılama - yani kullanım olanağı fill="none"ile pointer-events="visible".

— Fabien Snauwaert

645

Ek bir öznitelik kullanırsınız; fill-opacity: Bu özellik, 0.0 ile 1.0 arasında (ondalık sayı dahil); burada 0.0 tamamen şeffaftır.

Örneğin:

<rect ... fill="#044B94" fill-opacity="0.4"/>

Ayrıca aşağıdakilere de sahipsiniz:

stroke-opacity kontur özelliği
opacity tüm nesne için

— Williham Totland
kaynak

3

MDN, SVG Tutorial, developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/…

— t-mart

4

bunları style özelliğine de koyabilirsiniz: <rect style = "fill: # 044B94; fill-opacity: 0.4;" />

— PeterVermont

Yukarıda "dolgu opaklığı" ve "kontur opaklığı", "dolgu_opasitesi" ve "kontur_opasitesi" ile değiştirilmelidir (yani, kısa çizgileri alt çizgi ile değiştirin).

— mermaldad

1

mermaldad Bu yanlış; teknik özelliklere bakın . Adların kısa çizgi içermesine izin vermeyen bazı dillerde, SVG ile çalışmak için kütüphaneler fill_opacity, ancak SVG ve CSS'de adları kullanır fill-opacity.

— Williham Totland

@WillihamTotland, düzeltme için teşekkürler. Zihinsel olarak "Python'da svgwrite kullanarak bunu nasıl uygularım" bölümüne atladım. Orada kısa çizgileri alt çizgilerle değiştirmeniz gerekir.

— mermaldad

78

Henüz tam olarak standartlaştırılmamış bir çözüm olarak (CSS3'teki renk sözdizimiyle uyumlu olsa da) kullanabilirsiniz fill="rgba(124,240,10,0.5)". Firefox, Opera, Chrome'da iyi çalışır.

İşte bir örnek .

— Erik Dahlström
kaynak

3

Baktığımızda w3.org/TR/SVG/painting.html#FillProperties (dolgu-opaklık için biraz aşağı kaydırma); bu benim için tamamen standartlaşmış görünüyor.

— Williham Totland

10

@williham: evet dolgu opaklığı SVG önerisinde ve bunu kullanmayla ilgili bir sorun yok. CSS3 sözdizimi, bir w3c önerisi olmaktan bir adım ötedeki CSS3 Renkli'dir. SVG 1.1, o sırada mevcut olmadığı için CSS3 Color'a referans vermiyor, muhtemelen SVG'nin gelecekteki bir sürümü olacak.

— Erik Dahlström

7

Sadece bahsetmek istiyorum, bunun işe yaramadığı bir yer Inkscape

— George Mauer

2

Bu çözümü Highcharts'ta kullandım ve işe yaradı. Bu dönüştürülmüş rgbaiçin rgbve otomatik olarak eklenmesini fill-opacitybuna niteliği. Normal SVG'lerde de böyle çalışıp çalışmadığından emin değilim, ama orada böyle çalıştı. Her iki şekilde de, teşekkürler.

— Hanna

3

Inline svgs rgba aslında hangi tarayıcılar aslında destekleyebilir biraz açıklayabilir miyim?

— redanimalwar

6

fill="#044B9466"

Bu, SVG içinde onaltılık değerlerle tanımlanmış onaltılık bir RGBA rengidir . Bu geçerlidir, ancak tüm programlar düzgün görüntüleyemez ...

Bu sözdizimi için tarayıcı desteğini burada bulabilirsiniz: https://caniuse.com/#feat=css-rrggbbaa

Ağustos 2017 itibarıyla: RGBA dolgu renkleri Mozilla Firefox (54), Apple Safari (10.1) ve Mac OS X Finder'ın "Hızlı Görünümü" nde düzgün bir şekilde görüntülenecektir. Bununla birlikte, Google Chrome, sürüm 62'ye kadar bu sözdizimini desteklemedi (daha önce Deneysel Platform Özellikleri bayrağı etkin durumdaki 54 sürümünden destekleniyordu).

— Mr-IDE
kaynak

Son zamanlarda bir şeyi değiştirip değiştirmediklerini biliyor musunuz? Dolgu kullanılan bir çalışma krom uygulaması vardı: rgb (...) ve şimdi tamamen kırık. Yardımını takdir ediyorum!

— Mariodiar

Qt SVG kütüphanesi (Qt 5.9.3) RGBA renklerini şu ana kadar "# 00000000" hex formunda veya "rgba" olarak işleyemez.

— bkausbk

2

Bir dolguyu tamamen şeffaf yapmak için fill="transparent"modern tarayıcılarda çalışıyor gibi görünüyor. Ama Microsoft Word'de (Mac için) işe yaramadı, kullanmak zorundaydım fill-opacity="0".

— Brett Donald
kaynak

İçin Inkscape vektör grafik editörü 0.92.4.0 , fill="none"çalışır, ancak fill="transparent"değil.

— samm

1

fill-opacitySVG öğenizde nitelik kullanın .

Varsayılan değer 1, minimum 0, adım kullanım ondalık değerleri EX: 0.5 = alfa% 50. Not: Uygulanacak fillrengi tanımlamak gerekir fill-opacity.

Bkz benim örnek .

Kaynaklar .

— Darlan Dieterich
kaynak