圖案填充svg和colorpicker

Question

我想使用bootstrap-colorpicker-master更改圖案填充svg的顏色。 然后使用POST方法將svg的網址發送到數據庫。

我已經嘗試過了，但仍然無法正常工作：

HTML代碼：

<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8px'>
    <rect width='8' height='8px' id='bg_color' fill='#ffff00'/>
    <path d='M0 0L8 8ZM8 0L0 8Z' stroke-width='1' stroke='#1e292d'/>
</svg>
<div class="input-append color bscp" data-color="#ffff00"  id="cp1">
    <input id="game_color" class="span5" style="height:20px; width:400px;" value>
    <span class="add-on" style="height:20px; width:20px; padding:0 0"><i style="height:14px; width:14px; margin:3px 3px" onclick="stripedColor()"></i></span>
</div>
<input id="game_color_striped" type="hidden" name="g_color" >

我正在使用的腳本：

var url = 'url("' + b64 + '")';
var svg = document.getElementsByTagName('svg')[0];
var div = document.createElement('div');
div.appendChild(svg.cloneNode(true));

var b64 = 'data:image/svg+xml;base64,'+window.btoa(div.innerHTML);

$(function(){

        $('#cp1').colorpicker().on('changeColor', function(ev){
            document.getElementById('bg_color').fill = '#'+event.color.toHex();
            //document.getElementById('game_color').value = b64;
            document.getElementById("game_color_striped").value = url;
                    });

        });

有什么幫助嗎？

Answer 1

關於這條線

document.getElementById('bg_color').fill = '#'+event.color.toHex();

該元素上沒有fill屬性。 您可以使用setAttribute設置填充CSS映射的屬性，例如

document.getElementById（'bg_color'）。setAttribute（'fill'，'＃'+ event.color.toHex（））;

或者您可以通過設置填充樣式

document.getElementById('bg_color').style.fill = '#'+event.color.toHex()