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个tds的表，使用2个不同的图片，设置宽度百分比，使我的svg元素有2种颜色，但SVG的颜色保持不变。

编辑：

我尝试了但没有奏效：

 $('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 rects上获得了一些颜色，但即使这样也没有用......

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>

关键是对于纯色块，您必须在块的任一端设置一个停止点。所以在红色区块的开始处停止，在红色区块的末端停止，然后在绿色区块的最后一个停止之前在绿色区块开始的同一位置停止。

然后使用id：

将渐变分配给矩形

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

Here's a working example

- 修改

以下是another example where the gradient is adjusted by JavaScript，基本上抓住stop元素并直接设置offset属性。

设置SVG元素的外观

1 个答案: