4路漸變填充。可能？

我需要繪製4個點並用線性漸變填充區域，使每個點具有不同的顏色。是否可以在HTML5，SVG或任何其他「瀏覽器」中執行此操作？4路漸變填充。可能？

謝謝。

2012-06-16 Ωmega

我不知道瀏覽器支持ATM多遠，但我發現它有助於使用像InkScape這樣的程序獲得SVG中的概念驗證，然後檢查瀏覽器中的支持。 – Wrikken

我嘗試下面的代碼在this小提琴

<svg height="500" width="500"> 
    <linearGradient id="R"> 
     <stop offset="0" stop-color="red" stop-opacity="1"/> 
     <stop offset="1" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 

    <linearGradient id="G" gradientTransform="rotate(180 0.5 0.5)"> 
     <stop offset="0" stop-color="green" stop-opacity="1"/> 
     <stop offset="1" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 
    <linearGradient id="B" gradientTransform="rotate(270 0.5 0.5)"> 
     <stop offset="0" stop-color="blue" stop-opacity="1"/> 
     <stop offset="1" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 

    <path d="M 100,100 L 300,100 L 200,300 Z" fill="url(#R)"/> 
    <path d="M 300,100 L 100,100 L 200,300 Z" fill="url(#G)"/> 
    <path d="M 200,300 L 300,100 L 100,100 Z" fill="url(#B)"/> 
</svg>

得到這個結果

sample of linear gradients superposition

HTH

編輯我試圖改善和擴展到了4分：見updated小提琴。你的問題對我學習SVG結構的基礎知識很有用。

<svg height="500" width="500"> 

    <linearGradient id="R" gradientTransform="rotate(45 .5 .5)"> 
     <stop offset="0" stop-color="red" stop-opacity="1"/> 
     <stop offset=".5" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 
    <linearGradient id="G" gradientTransform="rotate(135 .5 .5)"> 
     <stop offset="0" stop-color="green" stop-opacity="1"/> 
     <stop offset=".5" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 
    <linearGradient id="B" gradientTransform="rotate(225 .5 .5)"> 
     <stop offset="0" stop-color="blue" stop-opacity="1"/> 
     <stop offset=".5" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 
    <linearGradient id="Y" gradientTransform="rotate(315 .5 .5)"> 
     <stop offset="0" stop-color="yellow" stop-opacity="1"/> 
     <stop offset=".5" stop-color="white" stop-opacity="0"/> 
    </linearGradient> 
    <defs> 
     <path id="P" d="M 100,100 L 300,100 L 300,300 L 100,300 Z"/> 
    </defs> 
    <use xlink:href="#P" fill="url(#R)"/> 
    <use xlink:href="#P" fill="url(#G)"/> 
    <use xlink:href="#P" fill="url(#B)"/> 
    <use xlink:href="#P" fill="url(#Y)"/> 
</svg>

這是值得大家注意的是與stop offset="0"打我們得到不同的結果... 這裏基本：

enter image description here

來源

2012-06-16 22:11:17 CapelliC

第二個和第三個參數rotate（）是旋轉軸 - 0.5 0.5圍繞中心點旋轉。 – lucideer

@lucideer - 但系統會計算任何形狀的中心點嗎？中心點的計算並不總是容易的任務。 –

@ user1215106不，系統不會自動計算，因此如果您將rotate（）轉換應用於某種典型的SVG形狀，您必須知道正在旋轉的元素的高度和寬度。這是一個應用於梯度矢量的gradientTransform，其長度始終等於1，因此很簡單。 – lucideer

4路漸變填充。可能？

回答

相關問題