Question

我有画布＆amp;使用fabric js，点击bg_img按钮一个透明svg图像设置为画布作为背景图像成功，我也可以轻松更改画布背景颜色，同样我想要动态更改此背景svg图像的填充颜色。

//set SVG image to canvas background
$("#bg_img").click(function() {
    $('.lower-canvas').css("background-image", "url(admin_svg/BB_birds_in_flight.svg)");
    var svg = $('.lower-canvas').find('svg');
});
/////for SVG Image Fill color change
$('#color_shap').change(function() {
    var active_colour = $("#color_shap").val()
    var obj = canvas.getSvgDATA(); //what code should i place here ?
    if(!obj) return;
    obj.setFill(active_colour);
    canvas.renderAll();
});

我附加了屏幕截图这是我的设计布局。 1 enter image description here

添加svg背景（有许多剥皮鸟）后，我改变了墙面颜色 enter image description here

现在我想更改背景图像中最初为黑色的鸟的svg填充颜色？有谁让我知道我该怎么做？答案将不胜感激。

Answer 1

您需要手动编辑编辑admin_svg / BB_birds_in_flight.svg，以便鸟类具有您想要的颜色。您无法从主机文档更改背景图像的内容。

当用作图像时，SVG文档与普通的png或jpeg图像非常相似，它必须全部在一个文件中，并且不能从外部操作。这使得托管网站可以上传SVG图像，并在知道图像不会在以后彻底改变的情况下对其进行审查。

如果您想要更改颜色，您的选项仅限于CSS或SMIL动画。这里有两只SMIL animation的鸟 - 如果你把鼠标放在其中一只鸟上它会改变颜色，另一只鸟会一直变色：

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="453.03px" height="472.836px" viewBox="0 0 453.03 472.836" enable-background="new 0 0 453.03 472.836"
     xml:space="preserve">
<path d="M87.984,94.513c0.82,1.46,0.172,2.887-1.164,3.744c-1.421,0.91-2.587,0.431-4.051-0.072
    c-0.674-0.232-1.711-0.772-2.438-0.625c-1.042,0.212-0.678,0.57-1.233,1.269c-0.935,1.17-2.227,1.312-3.746,1.437
    c-1.336,0.107-3.43-0.987-4.604-0.569c-0.926,0.329-0.5,0.813-1.017,1.417c-0.645,0.755-1.024,0.729-2.022,0.859
    c-0.749,0.097-1.64,0.327-2.387,0.329c-0.813,0.001-1.579-0.644-2.299-0.626c-1.511,0.038-1.758,1.945-3.135,2.501
    c-0.939,0.379-1.774-0.021-2.705,0.002c-0.948,0.025-1.389,0.501-2.267,0.708c-1.834,0.435-3.026-0.993-3.218-2.733
    c-1.063,0.744-4.896,4.812-5.61,1.726c-0.734,0.854-2.62,1.085-3.585,0.496c-1.236-0.755-0.802-2.278-0.581-3.509
    c-1.46,0.357-9.383,0.114-5.924-2.45c-1.324,0.217-3.962,0.587-5.209,0.077c-1.852-0.759-0.645-2.461,0.45-3.403
    c-1.24-0.419-3.361-0.411-4.388-1.267c-1.591-1.329,0.586-2.169,1.55-3.019c-1.143-0.3-2.68-0.52-2.697-2.021
    c1.373-0.462,2.821-0.293,4.23-0.822c1.071-0.401,2.134-0.777,3.222-1.079c2.742-0.76,5.067-1.948,7.641-3.161
    c1.217-0.572,2.478-1.093,3.683-1.587c-0.866-0.229-1.215-1.323-1.807-1.437c-0.587-0.113-1.604,0.703-2.431,0.586
    c-1.477-0.209-3.967-1.378-4.219-3.009c-1.846,0.031-2.704,0.462-4.396-0.82c-0.908-0.688-2.61-2.065-2.076-3.348
    c-2.351,0.296-5.791-3.112-6.046-5.326c-2.948,0.842-5.4-3.351-5.91-5.908c-1.004,0.458-2.49-1.13-3.023-1.912
    c-1.078-1.579-0.597-2.212,0.015-3.689c-2.467-0.2-5.402-6.163-2.767-7.659c-1.172-0.18-2.285-2.387-2.62-3.415
    c-0.56-1.717,0.122-2.444,1.469-3.347c-1.387-0.216-3.082-2.939-3.437-4.223c-0.651-2.357,1.116-3.285,3.001-3.967
    c-1.611-0.927-3.746-2.969-4.453-4.715C4.5,26.778,7.816,26.46,10.02,27.035c-1.666-0.67-3.225-3.653-4.081-5.181
    c-0.497-0.889-1.016-2.331,0.146-2.929c0.967-0.499,2.669,0.565,3.644,0.736c1.392,0.244,2.787,0.13,4.178,0.465
    c-2.3-1.848-5.741-4.789-4.775-8.225c0.964-3.433,5.68,1.72,7.266,2.578c1.584,0.857,3.191,1.567,4.704,2.561
    c-2.825-2.965-6.371-5.107-6.314-9.728c0.079-6.399,5.759,0.963,7.4,2.478c1.621,1.495,3.417,2.795,5.058,4.271
    c-2.628-4.239-7.558-8.447-5.277-14.053c1.971-0.211,4.346,3.672,5.579,4.958c2.065,2.156,3.656,4.725,5.427,7.139
    c0.785,1.069,1.701,2.367,2.925,2.842c-1.749-2.986-3.551-6.163-4.153-9.614c-0.144-0.824-0.586-3.085,0.518-3.531
    c1.131-0.457,2.32,1.512,2.791,2.225c2.119,3.212,3.18,6.991,5.406,10.15c1.816,2.579,3.769,4.957,5.353,7.703
    c1.722,2.986,3.542,5.81,5.632,8.557c-0.271-2.031-0.328-4.323,2.122-2.604c1.664,1.168,2.715,2.941,3.393,4.813
    c0.607,1.683,0.859,3.59,2.17,4.905c1.439,1.444,3.671,2.444,5.431,3.438c3.667,2.071,7.476,3.273,11.689,2.444
    c1.896-0.372,3.586-0.839,4.817-2.398c1.394-1.765,2.281-3.686,4.413-4.743c3.608-1.788,10.16-0.13,11.59,3.819
    c1.95-1.132,3.604-1.732,4.692-3.841c1.039-2.013,2.38-4.016,4.639-1.741c2.264-1.687,5.184-2.058,7.484-3.754
    c1.087-0.802,2.128-1.294,3.021-2.3c0.661-0.745,1.148-1.707,1.983-2.291c0.151,1.399-3.497,5.669-2.849,5.166
    c0.648-0.504,19.932-6.459,25.873-14.905c1.23-1.748,2.054-3.679,3.183-5.481c0.286,0.748,0.675,2.016,0.282,2.782
    c0.825-0.706,1.21-1.5,1.338-2.525c0.184,0.016,0.634,0.182,0.81,0.298c1.787,1.198-1.185,5.861-3.115,7.503
    c-0.055,0.052-0.057,0.049-0.008-0.008c0.679-0.538,2.367-2.368,2.976-1.187c0.706,1.371-1.895,3.267-2.702,3.954
    c-2.622,2.234-4.813,3.844-7.887,5.362c-1.469,0.725-2.29,2.128-3.72,2.919c2.12,0.049,4.68-0.223,6.649-0.71
    c1.903-0.47,4.077-1.858,6.091-2.004c-0.503,1.643-3.334,3.179-4.729,4.079c-1.173,0.756-4.695,2.272-4.875,3.642
    c1.871-0.374,4.174-0.06,6.143,0.043c0.292,1.631-3.296,3.008-4.36,3.864c-1.481,1.194-3.405,1.769-4.768,3.164
    c2.587,0.735,3.446,1.63,1.556,3.95c-1.243,1.524-2.484,2.584-4.333,3.28c1.987,2.955-0.029,6.565-3.158,7.324
    c0.427,2.25,0.038,4.796-2.59,4.748c-0.055,2.415-0.623,2.823-2.877,3.459c0.167,0.465,0.033,0.774-0.19,1.246
    c-0.397-0.158-0.611,0.078-0.958,0.047c0.075,2.688-1.458,2.49-3.597,2.877c-0.349,1.479-0.896,1.756-2.078,2.471
    c-1.053,0.637-1.571,1.411-2.369,2.356c-0.763,0.908-1.501,1.903-2.616,2.36c-1.673,0.683-1.723,0.514-2.75,1.96
    c-0.888,1.252-1.739,0.958-2.928,1.641c-1.255,0.723-1.298,1.624-2.92,1.751c-1.518,0.121-1.951,0.46-3.324,0.966
    c-0.795,0.292-2.344,0.852-3.163,0.929c-0.79,0.074-1.344-0.473-2.078-0.567c-0.701-0.092-1.14,0.201-1.806,0.233
    c-1.528,0.072-2.589-0.78-3.223-2.158c-0.55,0.162-0.949,0.615-1.571,0.839c-0.664,0.24-1.007-0.078-1.498,0.005
    c-0.558,0.095-0.992,0.474-1.579,0.564c-0.594,0.092-1.231-0.229-1.897-0.114c0.936,1.37,2.031,2.27,3.313,3.286
    c1.251,0.991,2.118,2.374,3.351,3.349c1.195,0.945,8.085,1.883,5.07,4.587c-1.175,1.053-3.524,0.903-4.996,1.016
    c-0.225,0.198-0.007,0.024,0.119-0.032">
    <animate attributeName="fill" begin="0s" from="#FF0000" to="#FFFFFF" dur="5s" repeatCount="indefinite"/>
</path>
<path fill="#020202" d="M32.75,442.628c-3.35-3.172-6.543-7.686-8.207-11.979c-2.085-5.374-3.971-10.904-5.412-16.487
    c-1.339-5.188-2.325-10.639-2.477-16.005c-0.162-5.798,1.792-10.223,5.739-14.402c1.829-1.937,3.762-3.802,5.15-6.097
    c1.313-2.174,1.979-4.586,2.567-7.033h-0.083c-2.1-0.359-3.815-1.056-5.719-1.971c-1.836-0.882-3.815-1.273-5.793-1.696
    c-2.004-0.431-3.877-0.685-5.875-0.07c-1.935,0.596-3.8,1.395-5.741,1.987c-2.285,0.696-4.538,1.433-6.9,1.823
    c3.329-3.627,8.224-5.402,12.573-7.474c0.981-0.469,1.839-1.033,2.534-1.881c0.666-0.811,1.134-1.756,1.976-2.413
    c1.688-1.321,4.514-1.941,6.607-2.2c2.706-0.334,5.238,0.736,7.944,0.887l0.763-0.107c0.26-0.469,0.11-0.883,0.355-1.359
    c2.531-4.93,2.08-10.188-0.101-15.173c-1.062-2.432-2.549-4.857-2.538-7.594c0.008-2.483,1.188-4.817,2.35-6.946
    c2.55-4.678,6.353-8.093,9.741-12.125c3.9-4.64,7.604-9.367,11.671-13.877c3.37-3.736,6.66-7.523,9.707-11.529
    c-0.11,2.445-0.989,4.358-2.077,6.508c-0.514,1.015-1.161,1.991-1.571,3.055c-0.406,1.059-0.403,2.164-0.584,3.268
    c-0.372,2.27-1.527,4.434-2.116,6.673c-0.623,2.369-1.329,4.314-1.437,6.795c-0.093,2.146-0.1,4.888-1.326,6.729
    c-1.389,2.088-3.426,2.635-3.242,5.469c0.13,1.984,0.299,4.062,0.676,6.014c0.445,2.315,1.189,4.271,1.15,6.676
    c-0.077,4.911,1.281,9.625,0.681,14.539c-0.065,0.542-0.621,1.284-0.196,1.625c1.057,0.85,2.096,1.72,2.937,2.791
    c0.916,1.167,1.503,2.562,2.452,3.702c1.926,2.318,5.583,2.692,8.286,3.662c3.051,1.093,6.266,1.676,9.455,2.206
    c3.302,0.549,6.555,1.012,9.801,1.858c3.132,0.818,6.273,1.683,9.51,1.958c0.381,0.031,0.764,0.059,1.145,0.085
    c-0.035,0.068-0.065,0.129-0.088,0.213c-0.753,0.184-1.548-0.155-2.312-0.234c-0.607-0.062-2.059-0.331-2.543-0.073
    c0.53-0.013,1.06,0.321,1.563,0.405c0.53,0.088,1.083,0.075,1.592,0.181c0.915,0.189,2.174,0.315,2.989,0.719
    c-0.933,0.317-1.785-0.205-2.659-0.247c-0.964-0.046-1.85-0.029-2.815-0.123c-1.982-0.191-4.05-0.272-5.997-0.37
    c-3.933-0.195-7.928-0.415-11.891-0.406c-1.964,0.006-4.603-0.251-6.46,0.263c0.399,0.338,0.97,0.517,1.43,0.739
    c-0.375,0.496-1.18,0.071-1.704,0.059c-0.706-0.018-1.355,0.113-2.069,0.077c-1.427-0.07-2.889-0.051-4.294-0.121
    c-2.78-0.142-5.716-0.007-8.494,0.124c-1.341,0.062-3.242-0.204-4.325,0.411l-0.163,0.245c-1.566,4.709-3.674,8.62-

6.002,12.982
    c-1.285,2.408-2.048,4.997-3.642,7.241c-1.232,1.735-2.028,3.638-3.106,5.461c-1.297,2.193-0.963,3.672-0.666,6.104
    c0.28,2.286,0.155,4.715-0.124,6.997c-0.284,2.323-0.421,4.646-0.682,6.967c-0.265,2.359-1.24,4.557-1.477,6.932
    c-0.234,2.356-0.511,4.813-0.479,7.182c0.03,2.339,0.888,4.64,0.475,6.98c-0.089,0.503-0.23,0.996-

0.381,1.484L32.75,442.628z">
    <animate attributeName="fill" begin="mouseover" from="#FF0000" to="#000000" dur="5s"/>
</path>
</svg>

使用fabric.js动态更改画布背景svg图像的“填充颜色”

1 个答案: