pattern fill svg and colorpicker

Question

I wanna change the color of pattern fill svg using bootstrap-colorpicker-master. Then send the url of the svg with POST Method to database.

I've tried this but still not working:

The Html code :

<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" >

The script I'm using :

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;
                    });

        });

Is there any help?

Answer 1

Regarding this line

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

There's no fill property on that element. There's a fill CSS mapped attribute that you could set with setAttribute eg

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

or you could set a fill style via

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