僅使用圖像的SVG蒙版alpha通道

我正在嘗試使用圖像來掩蓋另一個SVG。我有一個問題，圖像有RGB和alpha通道，所以掩碼使用了兩個通道。僅使用圖像的SVG蒙版alpha通道

我已經試過這現在：

<mask id="mask-1" maskUnits="userSpaceOnUse" x="0" y="0" 
     width="1600" height="3200"> 
     <rect x="-92" y="-707.5" width="1600" height="3200" 
     filter="url(#a)"></rect> 
</mask> 
<filter id="a"> 
     <feImage out="SourceAlpha" x="-92" y="-707.5" width="1600" height="3200" 
     xlink:href="image.png" 
     preserveAspectRatio="none" /> 
</filter>

但它沒有給出所需的輸出。

任何幫助？

來源

2014-10-27 Saša Makorič

您需要更多地處理SourceAlpha，因爲它的亮度通道設置爲黑色 - 您希望它設置爲白色 - 因此您需要一個顏色矩陣。（你也需要使用正確的語法和機制）。

這在IE工作10+以及受益（其中屏蔽型尚不支持。）

<filter id="justAlphaandWhite"> 
     <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" /> 
    </filter> 

    <mask id="m"> 
     <image filter="url(#justAlphaandWhite)" width="512" height="341.5" xlink:href="http://www.fnordware.com/superpng/pnggrad16rgba.png"/> 
    </mask> 
    </defs> 

    <g mask="url(#m)"> 
      <circle cx="256" cy="200" r="150" fill="black"/> 
    </g>

來源

2014-10-27 21:39:13

的'mask-type'屬性可以用來控制口罩應該如何表現。請注意，CSS遮罩規範目前是候選推薦標準，並非所有瀏覽器都已實現此目標（但它已在Chrome和Opera中運行）。

<mask id="m" mask-type="alpha"> 
    <circle cx="50" cy="50" r="25"/> 
</mask>

這使得該遮罩表現爲alpha遮罩，而不是亮度遮罩，這是svg中的默認值。

請參閱this blog post其中有關此功能的更多信息。

來源

2014-10-28 13:18:08

僅使用圖像的SVG蒙版alpha通道

回答

相關問題