CODEWITHSUNDEEP
jquerysvg
Hallaghan
Hallaghan

Reputation: 1941

Setting the appearence of a SVG element

Using SVG, how can I set the appearence of the svg element to be the table that it contains? The element I'm trying to change is below:

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

So basically, what I was trying to do was inserting a table with 2 tds using 2 different pictures with a set width percentage to make my svg element have 2 colors but the SVG's color remains the same.

EDIT:

What I've tried but didn't work:

 $('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')));
                }
            });

EDIT 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');



        });

My 2nd attempt at getting some colour on my svg rects, but not even this has worked...

Upvotes: 0

Views: 2973

Answers (1)

robertc
robertc

Reputation: 75707

Define your gradient like this:

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

The key point is that for blocks of solid colour you have to set a stop at either end of the block. So there's a stop at the start of the red block, a stop at the end of the red block, then a stop in the same place for the start of the green block before the final stop for the end of the green block.

Then assign the gradient to your rectangle using the 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.

--edit

Here's another example where the gradient is adjusted by JavaScript, basically grab the stop elements and set the offset attribute directly.

Upvotes: 1

Related Questions