Heim > Fragen und Antworten > Hauptteil
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粉4329300812024-02-27 09:07:47
正如罗伯特在上面指出的,色彩空间转换会产生一些奇怪的现象。在第二个颜色矩阵之后,像素实际上应该更亮。看来您可以通过添加一个额外的 feComponentTransfer(以 SQRT(1/2.2) 作为指数值)来解决此问题。