更改svg元素中的圖像顏色

-1

目標是顯示圖像，但使用svg中的其他顏色。我嘗試過使用背景顏色的-webkit-mask-image，但是這個組合在svg中不起作用。這裏是例子：更改svg元素中的圖像顏色

<div class="dashboard-buttons"> 
    <svg width="367" height="243.5" viewBox="252.5 60.5 367 243.5"> 
    <g> 
     <rect width="46" height="46" rx="4" ry="4" transform="translate(-23, -23)" style="fill:white" x="560" y="224"></rect> 
     <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3" href="#element3" onclick="window.location.href = '#element3';"> 
     <image height="32" width="32" transform="translate(-16, -16)" x="560" y="224" style="background-color: Red; -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg==');width: 32px; height: 32px;"></image> 
     </a> 

     <a xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#element3"><text filter="url(#fillbackground)" x="560" y="257">out</text></a> 
    </g> 
    </svg> 
</div>

如果你從它刪除svg標籤，然後這個示例工作和顏色改變。

你知道如何正確地更改svg中的圖像顏色嗎？

編輯：

下面的代碼工作在Chrome，但不能在Firefox：

<div class="wrapper"> 
    <svg width="200" height="300" class="svg"> 
     <defs> 
    <mask id="mask"> 
     <image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxIAAAsSAdLdfvwAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAACqSURBVFhH7ZYhDsJAFESHBMkBOCYGyQV6BQ6BQ0EwWByiuwj0Fk5AgO00+XJpCd20gpnkqfZnXrJmoCiVx+rmcWyD/2zCGXM7yZvK4c2S2InDiRIzO8uXZNkHgsM2HjC10zxJFXWwjsDEzvsnUfANVz7JpS93j+JXgSyEEs9RBRokIAEJSEACEpDA+AIcpa/UhyHg2n6A02jJabSjyH5Qms4SC1uGyt8GqAEZtGBDEZcerAAAAABJRU5ErkJggg=="> 
    </image> 
     </mask> 
</defs> 

       <rect width="50" height="50" style="fill:blue;" x="0" y="0" 
mask="url(#mask)"></rect> 

    </svg> 

</div>

來源

2017-09-21 Irina Petrushenko

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]中（https://blog.stackoverflow.com/2014/09/）引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建最小，完整和可驗證示例**]（http://stackoverflow.com/help/mcve） –

它在Firefox中不起作用，因爲第二個示例中的圖像元素沒有寬度和高度屬性。 –

-1

無法看到自己的例子，但是：

<rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" 
 
     fill-opacity="0.5" stroke-opacity="0.8"/>

使用填充選項！編輯：現在我可以看到你的代碼。如果您插入一個圖片作爲PNG：

數據：圖像/ PNG

然後我懷疑你可以改變HTML指令的顏色。 PNG是位圖而不是SVG，您必須編輯PNG本身才能實現。

來源

2017-09-21 15:19:22 shnek

感謝您的回答。這是否意味着如果我用svg編碼的圖像替換這個PNG，那麼樣本必須工作？ –

我試過 data：image/svg + xml; base64，... image 但它並沒有幫助 –

更改svg元素中的圖像顏色

回答

相關問題