如何更改使用SVG模式的顏色？

例如，我想在紅色的描邊圈中有一個綠色的圖案。

<svg width="300" height="300" viewBox="0 0 300 300" 
    xmlns="http://www.w3.org/2000/svg"> 
    <defs> 
    <pattern id="checked" width="2" height="2" stroke="black" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" 
     patternUnits="userSpaceOnUse"> 
     <line x1="0" y1="0" x2="0" y2="2"></line> 
     <line x1="0" y1="0" x2="2" y2="0"></line> 
    </pattern> 
    </defs> 
    <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)"/> 
    <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/> 
</svg>

http://codepen.io/anon/pen/RVNmRY

是否有可能這樣做，而不必創建爲每個顏色的新格局？

我已閱讀評論，這可能使用過濾器（https://stackoverflow.com/a/21427316/1981832）。但我不知道如何。

來源

2017-04-15 Daniel

有什麼不對每種顏色的圖案？ –

@RobertLongson謝謝。在我的頁面上，用戶應該能夠選擇顏色和圖案進行繪製。每種顏色都有一個圖案意味着每次用戶切換顏色時都必須將新圖案附加到頁面上。這對我來說似乎非常麻煩。但也許我在這裏忽略了一些東西。 – Daniel

將顏色名稱放在模式標識（或數據屬性）中，如果不存在，則創建它。您可以在CSS中設置顏色並更新CSS，但會影響具有該模式的所有現有形狀。 –

下面介紹如何使用「藍屏」技術爲過濾器重新着色形狀。過濾器會單獨留下紅色成分（矩陣中的前1個），將藍色轉換爲綠色（下一個「1」），並保留不透明度（最後的「1」）。這個特定的過濾器顯然只適用於你的例子，但你可以編寫一個更通用的過濾器來使用特定的源顏色作爲將被轉換爲其他顏色的顏色。

<svg width="300" height="300" viewBox="0 0 300 300" 
 
    xmlns="http://www.w3.org/2000/svg"> 
 
    <defs> 
 
    <filter id="blue-to-green"> 
 
    <feColorMatrix type="matrix" values="1 0 0 0 0 
 
              0 0 1 0 0 
 
              0 0 0 0 0 
 
              0 0 0 1 0"/> 
 
    </filter> 
 
    
 
    <pattern id="checked" width="2" height="2" stroke="blue" stroke-linecap="square" stroke-width="1" patternTransform="rotate(45) scale(2)" 
 
     patternUnits="userSpaceOnUse"> 
 
     <line x1="0" y1="0" x2="0" y2="2"></line> 
 
     <line x1="0" y1="0" x2="2" y2="0"></line> 
 
    </pattern> 
 
    </defs> 
 
    
 
    <circle cx="60" cy="60" r="50" stroke="red" fill="url(#checked)" filter="url(#blue-to-green)"/> 
 
    <circle cx="120" cy="60" r="50" stroke="blue" fill="url(#checked)"/> 
 
</svg>

來源

2017-04-15 18:40:38

謝謝。是的，因爲現在它必須爲每種顏色添加一個過濾器。這對於爲每種顏色添加圖案沒有太大的改進。 – Daniel

是的，如果SVG具有參數化過濾器，那就太好了，但是唉。 –

如何更改使用SVG模式的顏色？

回答

相關問題