Настройка внешнего вида элемента SVG

Question

Используя SVG, как я могу установить внешний вид элемента svg в качестве таблицы, которую он содержит? Элемент, который я пытаюсь изменить, находится ниже:

<rect style="fill: rgb(0, 0, 0); 
    fill-opacity: 0.784884; 
    stroke: rgb(0, 0, 0); 
    stroke-width: 0.447214; 
    stroke-miterlimit: 1; stroke-opacity: 0.784884; 
    stroke-dasharray: none;" 
    id="R4" width="600" height="80" x="70" y="322.36218" class="wz-rack" inkscape:label="">
    <table>
      <tbody>
        <tr>
          <td style="width: 94.4444%;">
             <img href="../smoothness/images/greenBackground.png"/>
          </td>
          <td style="width: 5.55556%;">
             <img href="../smoothness/images/redBackground.png"/>
          </td>
       </tr>
      </tbody>
    </table>
</rect>

В общем, я пытался вставить таблицу с 2 тд, используя 2 разных изображения с заданным процентом ширины, чтобы у моего элемента svg было 2 цвета, но цвет SVG остался прежним.

EDIT:

Что я пробовал, но не сработало:

 $('rect[class^="wz-rack"]').each(function() {
            var partialId = $(this).attr('id');
            var gradient = "<linearGradient id='red_green_-*-' x1='0%' y1='0%' x2='100%' y2='0%'>".replace("-*-", partialId);
            gradient += "<stop offset='0%' style='stop-color:rgb(255,0,0); stop-opacity:0.784884'/>";
            gradient += "<stop offset='94.4444%' style='stop-color:rgb(255,0,0); stop-opacity:0.784884'/>";
            gradient += "<stop offset='94.4444%' style='stop-color:rgb(0,255,0); stop-opacity:0.784884'/>";
            gradient += "<stop offset='100%' style='stop-color:rgb(0,255,0); stop-opacity:0.784884'/>";
            gradient += "</linearGradient>";
            $('#defs4').append(gradient);
            var id = "#red_green_p".replace("p", partialId);

            $(this).attr('fill', id);

        });

        $('rect[class^="wz-rack"]').each(function() {

            var zoneId = $(this).attr('id');
            var WarehouseId = $('#WarehouseId').val();

            var thisRack = $(this);

            var url = '<%= Url.Action("GetRackBusyPercent", "Warehouses", new {zoneId="-x-", warehouseId = "-y-"}) %>'.replace("-x-", zoneId).replace("-y-", WarehouseId)
            $.ajax({
                type: "GET",
                cache: false,
                url: url,
                async: true,
                success: function(data) {
                    var percentArray = JSON.parse(data);
                    var def = $('#red_green_' + zoneId);

                    var defArray = def.find('stop');

                    defArray[1].setAttribute("offset", percentArray[0] + "%")
                    defArray[2].setAttribute("offset", percentArray[0] + "%")


                    //thisRack.attr("fill", "url(#-*-) ; fill-opacity: 0.784884; stroke: rgb(0, 0, 0); stroke-width: 0.447214; stroke-miterlimit: 1; stroke-opacity: 0.784884; stroke-dasharray: none;".replace("-*-", def.attr('id')));
                }
            });

РЕДАКТИРОВАТЬ 2:

$($('rect[class^="wz-rack"]'), svg.root()).each(function() {

            var partialId = $(this).attr('id');
            var gradient = "<linearGradient id='red_green_-*-' x1='0%' y1='0%' x2='100%' y2='0%'>".replace("-*-", partialId);
            gradient += "<stop offset='0%' stop-color='red' />";
            gradient += "<stop offset='94.4444%' stop-color='red' />";
            gradient += "<stop offset='94.4444%' stop-color='green' />";
            gradient += "<stop offset='100%' stop-color='green' />";
            gradient += "</linearGradient>";

            $('#defs4').append(gradient);
            var id = "#red_green_p".replace("p", partialId);


            $(this).removeAttr('style');
            $(this).attr('fill', "url(#red_green_K)".replace("K", partialId));
            $(this).attr('fill-opacity', '0.784884');
            $(this).attr('stroke', 'rgb(0, 0, 0)');
            $(this).attr('stroke-width', '0.447214');
            $(this).attr('stroke-miterlimit', '1');
            $(this).attr('stroke-opacity', '0.784884');
            $(this).attr('stroke-dasharray', 'none');



        });

Моя вторая попытка получить какой-то цвет на моих SVG-директивах, но даже это не сработало ...

Answer 1

Определите свой градиент следующим образом:

<defs>
    <linearGradient id="red_green_94" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" style="stop-color:rgb(255,0,0); stop-opacity:0.784884"/>
        <stop offset="94.4444%" style="stop-color:rgb(255,0,0); stop-opacity:0.784884"/>
        <stop offset="94.4444%" style="stop-color:rgb(0,255,0); stop-opacity:0.784884"/>
        <stop offset="100%" style="stop-color:rgb(0,255,0); stop-opacity:0.784884"/>
    </linearGradient>
</defs>

Ключевым моментом является то, что для блоков сплошного цвета вы должны установить остановку на любом конце блока. Таким образом, есть остановка в начале красного блока, остановка в конце красного блока, затем остановка в том же месте для начала зеленого блока перед конечной остановкой для конца зеленого блока.

Затем назначьте градиент вашему прямоугольнику с помощью идентификатора:

<rect style="fill: url(#red_green_94); 
    fill-opacity: 0.784884; 
    stroke: rgb(0, 0, 0); 
    stroke-width: 0.447214; 
    stroke-miterlimit: 1; stroke-opacity: 0.784884; 
    stroke-dasharray: none;" 
    id="R4" width="600" height="80" x="70" y="322.36218" class="wz-rack" >
</rect>

Вот рабочий пример .

- редактирование

Вот другой пример, где градиент корректируется с помощью JavaScript , в основном захватывает элементы stop и устанавливает атрибут offset напрямую.