Tips for filling in path shapes on SVG?

Question

Tips for filling in path shapes on SVG?

Just a few days back, I was handed an SVG file by some designers and my task is to integrate it with some color variations and the usual hover effects, /edit: but at this point, the most important thing is to have control over the background color /edit/.

Here's a snippet of the HTML:

<div>
  <svg class="drawelements" viewBox="50 200 550 360">
    <polygon fill="red" points="312.200 265.600, 312.200 332.300, 265.600 332.300, 265.600 265.600, 312.200 265.600, 312.700 265.100, 265.100 265.100, 265.100 332.800, 312.700 332.800, 312.700 265.100, 312.700 265.100"></polygon>
    <path class="st0" d="M369 265.6v66.7h-46.6v-66.7H369M369.5 265.1h-47.6v67.7h47.6V265.1L369.5 265.1z"></path>
    <path class="st0" d="M425.7 265.6v66.7h-46.6v-66.7H425.7M426.2 265.1h-47.6v67.7h47.6V265.1L426.2 265.1z"></path>
    <path class="st0" d="M480.6 265.6v66.7H434v-66.7H480.6M481.1 265.1h-47.6v67.7h47.6V265.1L481.1 265.1z"></path>

You can see how it appears in this fiddle: fiddle

I decided to experiment with a polygon element first to eliminate potential issues with path elements.

Despite trying traditional CSS styling methods and inline styles within each element, nothing seems to work. Could it be that I need to use something other than background-color or fill?

If you check out the fiddle, please disregard the viewBox as the actual SVG has many more components which I omitted for simplicity in this post.

html css svg background-color fill

Answer 1

Answer №1

It seems that the issue lies in how the SVG shape was constructed rather than in your code. The fill property should technically fill a shape with color, but due to the way the path elements were created, there is an empty space at the center of the shape.

The coordinates defined by the d attribute dictate how the shape is drawn, and in this case, they create more of a frame than a solid board. This results in the background color not appearing as expected when applying a fill.

To better understand the commands used in the d attribute:

M369 265.6 - moves the pen to (369,265.6)
v66.7 - draws a vertical line downward
h-46.6 - draws a horizontal line to the left
v-66.7 - draws a vertical line upward
H369 - draws a horizontal line

The additional commands in the d attribute create an inner box within the shape, resulting in only the outer border being filled with the specified color.

It appears that the designer's approach was unconventional, and it may be simpler to remove these inner box commands for a more traditional fill effect. After doing so, apply the fill property to achieve the desired result.

For reference, check out this MDN tutorial on SVG paths.

In conclusion, modifying the d attribute of each path element and removing unnecessary coordinates will allow the fill color to be applied correctly. You can also override the default fill color using CSS properties if needed.

Note:

If no fill color is specified, the default is black unless set otherwise to transparent or none.
CSS-defined fill colors take precedence over those specified in SVG attributes, per specifications.

Answer 2

It seems that the issue lies in how the SVG shape was constructed rather than in your code. The fill property should technically fill a shape with color, but due to the way the path elements were created, there is an empty space at the center of the shape.

The coordinates defined by the d attribute dictate how the shape is drawn, and in this case, they create more of a frame than a solid board. This results in the background color not appearing as expected when applying a fill.

To better understand the commands used in the d attribute:

M369 265.6 - moves the pen to (369,265.6)
v66.7 - draws a vertical line downward
h-46.6 - draws a horizontal line to the left
v-66.7 - draws a vertical line upward
H369 - draws a horizontal line

The additional commands in the d attribute create an inner box within the shape, resulting in only the outer border being filled with the specified color.

It appears that the designer's approach was unconventional, and it may be simpler to remove these inner box commands for a more traditional fill effect. After doing so, apply the fill property to achieve the desired result.

For reference, check out this MDN tutorial on SVG paths.

In conclusion, modifying the d attribute of each path element and removing unnecessary coordinates will allow the fill color to be applied correctly. You can also override the default fill color using CSS properties if needed.

Note:

If no fill color is specified, the default is black unless set otherwise to transparent or none.
CSS-defined fill colors take precedence over those specified in SVG attributes, per specifications.

Answer 3

Answer №2

When working with SVG, you may notice that CSS can sometimes override the path's fill attribute.

To apply CSS to SVG elements, you'll need to target the specific element just like you would when styling HTML. For example, if you want to apply a style to all SVG paths, you could use the following code:

path {
    fill: blue;
}

Refreshing Your Css Styles

div {
  fill: red;
}

svg {
  fill: blue;
}

// The following will not work
.st0 {
  fill: red;
}

Snippet Example Provided Below

div {
  fill: red;
}

svg {
  fill: blue;
}

<div>
<svg class="drawelements" viewBox="50 200 550 360">
<polygon fill="red" points="312.200 265.600, 312.200 332.300, 265.600 332.300, 265.600 265.600, 312.200 265.600, 312.700 265.100, 265.100 265.100, 265.100 332.800, 312.700 332.800, 312.700 265.100, 312.700 265.100"></polygon>
<path class="st0" d="M369 265.6v66.7h-46.6v-66.7H369M369.5 265.1h-47.6v67.7h47.6V265.1L369.5 265.1z"></path>
<path class="st0" d="M425.7 265.6v66.7h-46.6v-66.7H425.7M426.2 265.1h-47.6v67.7h47.6V265.1L426.2 265.1z"></path>
<path class="st0" d="M480.6 265.6v66.7H434v-66.7H480.6M481.1 265.1h-47.6v67.7h47.6V265.1L481.1 265.1z"></path>
<path class="st0" d="M537.3 265.6v66.7h-46.6v-66.7H537.3M537.8 265.1h-47.6v67.7h47.6V265.1L537.8 265.1z"></path>
<path class="st0" d="M255.5 265.6v66.7H209v-66.7H255.5M256 265.1h-47.6v67.7H256V265.1L256 265.1z"></path>
<path class="st0" d="M537.3 207.3v49.4H209v-49.4H537.3M537.8 206.8H208.5v50.4h329.3V206.8L537.8 206.8z"></path>
<path class="st0" d="M537.3 341.1v42.3H209v-42.3H537.3M537.8 340.6H208.5v43.3h329.3V340.6L537.8 340.6z"></path>

</svg>
</div>

Answer 4

When working with SVG, you may notice that CSS can sometimes override the path's fill attribute.

To apply CSS to SVG elements, you'll need to target the specific element just like you would when styling HTML. For example, if you want to apply a style to all SVG paths, you could use the following code:

path {
    fill: blue;
}

Refreshing Your Css Styles

div {
  fill: red;
}

svg {
  fill: blue;
}

// The following will not work
.st0 {
  fill: red;
}

Snippet Example Provided Below

div {
  fill: red;
}

svg {
  fill: blue;
}

<div>
<svg class="drawelements" viewBox="50 200 550 360">
<polygon fill="red" points="312.200 265.600, 312.200 332.300, 265.600 332.300, 265.600 265.600, 312.200 265.600, 312.700 265.100, 265.100 265.100, 265.100 332.800, 312.700 332.800, 312.700 265.100, 312.700 265.100"></polygon>
<path class="st0" d="M369 265.6v66.7h-46.6v-66.7H369M369.5 265.1h-47.6v67.7h47.6V265.1L369.5 265.1z"></path>
<path class="st0" d="M425.7 265.6v66.7h-46.6v-66.7H425.7M426.2 265.1h-47.6v67.7h47.6V265.1L426.2 265.1z"></path>
<path class="st0" d="M480.6 265.6v66.7H434v-66.7H480.6M481.1 265.1h-47.6v67.7h47.6V265.1L481.1 265.1z"></path>
<path class="st0" d="M537.3 265.6v66.7h-46.6v-66.7H537.3M537.8 265.1h-47.6v67.7h47.6V265.1L537.8 265.1z"></path>
<path class="st0" d="M255.5 265.6v66.7H209v-66.7H255.5M256 265.1h-47.6v67.7H256V265.1L256 265.1z"></path>
<path class="st0" d="M537.3 207.3v49.4H209v-49.4H537.3M537.8 206.8H208.5v50.4h329.3V206.8L537.8 206.8z"></path>
<path class="st0" d="M537.3 341.1v42.3H209v-42.3H537.3M537.8 340.6H208.5v43.3h329.3V340.6L537.8 340.6z"></path>

</svg>
</div>

Tips for filling in path shapes on SVG?

Answer №1

Answer №2

Similar questions

Using AngularJS to link ng-include in an ng-view HTML file

jQuery Summation: A Step-by-Step Guide

Eliminating blank spaces below or above images when displayed horizontally

The intricacy of the jQuery each function and its interaction with $(this

Out of the blue, margin-top and marin-left suddenly appeared

How can I view a comprehensive list of updates made to a webpage?

What are the essential files needed in Kendo UI Core for a mobile app?

What is the best way to conceal the jqgrid entirely while it is still loading?

Activate the jQuery click event by specifying the URL

Is there a way to void a delayed input event?

Creating square elements using only HTML and CSS

After running JavaScript, retrieve the canvas data using the toDataUrl() method

Do not trigger popup if mandatory field is left blank

Create a scrollbar that allows for both vertical and horizontal movement within the canvas

Prevent access to website during execution of background tasks

Executing code upon the completion of jquery's slideUp() function

"Adjusting the background color based on the current day using PHP and CSS

Struggling to get my DIV container perfectly centered

Bootstrap Dropdown Functionality Malfunctioning

Easily switch between visible and hidden content by clicking on an image that functions as a swap or toggle