我可以在SVG中用正常/鐘形混合定義線性漸變嗎？

考慮以下SVG片段：我可以在SVG中用正常/鐘形混合定義線性漸變嗎？

<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%"> 
    <stop offset="0%" stop-color="#ffffff"/> 
    <stop offset="100%" stop-color="#ff0000"/> 
</linearGradient> 
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>

有沒有指定用鐘形曲線的顏色應該被混合在一起的一種方式？下面

兩個矩形（至GDI+ LinearGradientBrush::SetBlendBellShape method類似）示區別 - 左邊是沒有鍾交融，右邊是與鍾，共混物：

alt text

或者是留下來的SVG渲染器決定如何將顏色混合在一起？

來源

2010-08-11 GarethOwen

您可以申請gradientTransform to a linear gradient。我不確定available transforms如何映射到您所需的效果。

如果這不起作用，您可以使用漸變作爲filter的輸入，並且可能最終會產生類似的效果。這裏是an article which covers combining filters。

來源

2010-08-11 23:13:59 robertc

+1謝謝羅伯特 - 我會做一些試驗，看看我能否創建一個更好的線性漸變，使用過濾器的標準。 – GarethOwen 2010-08-12 07:50:31

文章不存在 – 2015-01-11 12:23:46

此過濾器將應用鐘形轉換爲紅色/白色漸變。 enter image description here 。

原始位於左側，轉化爲右側。曲線不是非常精細（只有15個值），所以你可能會想要使用更多的項來表示大的漸變。

<svg width="500px" height="500px" viewbox="0 0 800 800"> 
    <defs> 
    <filter id="bellTransform" color-interpolation-filters="sRGB"> 
    <feComponentTransfer> 
     <feFuncG type="table" tableValues= 
       "0.0000 0.0059 0.0166 0.0346 0.0628 0.1038 0.1586 0.2259 0.3011 0.3761 0.4406 0.4844 0.5000 0.5156 0.5594 0.6239 0.6989 0.7741 0.8414 0.8962 0.9372 0.9654 0.9834 0.9941 1.0000"/> 
     <feFuncB type="table" tableValues= 
       "0.0000 0.0059 0.0166 0.0346 0.0628 0.1038 0.1586 0.2259 0.3011 0.3761 0.4406 0.4844 0.5000 0.5156 0.5594 0.6239 0.6989 0.7741 0.8414 0.8962 0.9372 0.9654 0.9834 0.9941 1.0000"/> 
     </feComponentTransfer> 
     </filter> 
    </defs> 

    <linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%"> 
    <stop offset="0%" stop-color="#ffffff"/> 
    <stop offset="100%" stop-color="#ff0000"/> 
</linearGradient> 
<rect filter="url(#bellTransform)" x="410" y="0" width="400" height="400" fill="url(#redgradient)"/> 

<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/> 

</svg>

來源

2014-01-08 23:45:07

我可以在SVG中用正常/鐘形混合定義線性漸變嗎？

回答

相關問題