Question

我想使用bootstrap-colorpicker-master更改模式填充svg的颜色。然后使用POST方法将svg的url发送到数据库。

我已经尝试了这个但仍然没有工作：

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

该元素没有填充属性。您可以使用setAttribute设置填充CSS映射属性，例如

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

或者您可以通过

设置填充样式

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

模式填充svg和colorpicker

1 个答案: