suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Warum wird Graustufen-SVG bei der Konvertierung in Alpha weniger hell?

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粉986937457P粉986937457276 Tage vor297

Antworte allen(1)Ich werde antworten

  • P粉432930081

    P粉4329300812024-02-27 09:07:47

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

    
        
         
        
       
         
      
    

    Antwort
    0
  • StornierenAntwort