How can I mask an SVG's background using polygons?

Question

I'm trying yo make an SVG with a gradient backgound color from red to yellow to green, inside the SVG I've got 2 polygons (for now because there'll be more) that I wish would mask the SVG's background. I tried the following code:

How can I apply a background to the SVG and have the polygons show the part of the background based on their position?

UPDATE

I updated my code (YES it needs some work) to achive a path with a unified background and also have transparent polygons in case you wish to add a onclick event.

Andrew Willems · Accepted Answer

UPDATE: I now show two snippets below. The first (original) snippet shows a manual solution. The second (newer) snippet shows a programmatic solution using JavaScript.

Are you OK with converting your polygons into paths? If so, you can combine multiple polygons into a single path and then apply the gradient to the whole thing. In the first code snippet below, I show three groups:

your original two polygons...incorrect gradients
the two polygons converted to two paths...still incorrect gradients
the two paths merged into a single path...correct gradient

Basically, to convert a polygon to a path, change the points attribute to a d attribute. Then, within the d value string, place an M (for "MoveTo") at the beginning and an L (for "LineTo") after the first two numbers. Putting an M halfway through the path is your way of telling the program "lift the pen and, without drawing anything, move it to this new location and continue drawing there", effectively allowing you to draw multiple "shapes" within a single path.

I've done the conversions above manually. However, this type of conversion could also be done programmatically, e.g. with JavaScript, which I have done in the second snippet below. Essentially this does the following:

get all desired polygons
for each polygon, read the points attribute value string
duplicate the final point (to numerically close each shape...important for strokes/borders)
insert the "M" (MoveTo) and "L" (LineTo) as described above
concatenate all theses strings
add a final "Z" (ClosePath) to close the path
create a new single path element
place the concatenated string from above into the d attribute of the path
apply the gradient to the new path

The example below initially shows 7 polygons with the same gradient applied to each individual shape. Note that the last polygon is simply one point and is thus invisible, indicated by the dotted circle.

After clicking the "Combine..." button, polygons 2 and 3 are combined into a single path, as are polygons 4 and 5 as well as polygons 6 and 7. The same gradient as before is now applied to each combined path. Note how the path combinations affect the placement of the colors along the gradient.

Note that the utility function I've written makes it as simple as adding more polygon id's to an array in order to combine more than two polygons together.

var xmlns = "http://www.w3.org/2000/svg";

var combine = function(polygonIds, newPathId) {
  var $newPath = $(document.createElementNS(xmlns, "path"));
  // jQuery does not work here, e.g. var $newPath = $("", {id: newPathId});
  $newPath.attr("id", newPathId);
  $("svg").append($newPath);
  var dStr = "";
  polygonIds.forEach(function(polygonId, idx, arr) {
    var $polygon = $("#" + polygonId);
    var ptsStr = $polygon.attr("points");
    dStr += "M " + ptsStr.replace(/, *| +/g, " ").trim().replace(/^([^ ]+ [^ ]+ )(.*)/, "$1L $2 $1");
  });
  dStr += "Z";
  $newPath.attr("d", dStr);
};

$("button#combine").click(function() {
  combine(["shape2", "shape3"], "path2and3");
  combine(["shape4", "shape5"], "path4and5");
  combine(["shape6", "shape7"], "path6and7");
  $("#path2and3").attr("fill", "url(#grad1)");
  $("#path4and5").attr("fill", "url(#grad1)");
  $("#path6and7").attr("fill", "url(#grad1)");
  $("#labels").remove().appendTo($("svg"));
});
$("button#delete").click(function() {
  $("path").remove();
});


Best viewed on "Full Page"
The "Combine..." button will combine polygons 2 and 3, polygons 4 and 5, and polygons 6 and 7. Polygon 7 is a single dot and is thus essentially invisible. The same gradient is applied to each individual polygon as well as to each of the new paths.

How can I mask an SVG's background using polygons?

Answers (2)

Related Questions

How can I mask an SVG&#39;s background using polygons?

Answers (2)

Related Questions

How can I mask an SVG's background using polygons?