Warum wird Graustufen-SVG bei der Konvertierung in Alpha weniger hell?
P粉986937457
P粉986937457 2024-02-26 18:01:19
0
1
380

Ich versuche, mit SVG einen transparenten „Sternennacht“-Effekt zu erzeugen. Ich habe die SVG-Datei inline in einem schwarzen Hintergrundelement auf der Webseite platziert. Ich habe mit einem Turbulenzfilter begonnen und dann eine Farbmatrix angewendet, um den gewünschten Effekt zu erzielen:

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...gegeben:

Aber dies hat keine Alpha-Transparenz; ich möchte, dass es eine Ebene aus weißen Pixeln darstellt, deren Helligkeit nur dadurch verringert wird, dass sie auf einem schwarzen Hintergrund liegt und eine geringere Deckkraft aufweist. Also habe ich es einem zweiten Filter unterzogen, um Folgendes zu erreichen:

<svg xmlns="http://www.w3.org/2000/svg">
    <filter id="filter">
        <feTurbulence baseFrequency="0.2" />
        <feColorMatrix values="
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 1 -.5
            0 0 0 0 1" />
        <feColorMatrix values="
            0 0 0 0 1
            0 0 0 0 1
            0 0 0 0 1
            1 1 1 0 0" />
    </filter>
    <rect width="100%" height="100%" filter="url(#filter)" />
</svg>

...gegeben:

Das ist sehr ähnlich, aber etwas dunkler. Warum ist es etwas dunkler? Sollte es bei der Überlagerung auf einem schwarzen Hintergrund nicht logischerweise dieselbe Pixelfarbe erzeugen?

P粉986937457
P粉986937457

Antworte allen(1)
P粉432930081

正如罗伯特在上面指出的,色彩空间转换会产生一些奇怪的现象。在第二个颜色矩阵之后,像素实际上应该更亮。看来您可以通过添加一个额外的 feComponentTransfer(以 SQRT(1/2.2) 作为指数值)来解决此问题。


    
     
    
   
     
  
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage