SVG fill-rule being ignored

user_14653430 0
Viewed 510

Let's say I have this SVG:

.star g path {
      fill-rule: evenodd;
      fill: red;
    }
    <svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <g>
        <path d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094zM12 6.258l1.575 3.193.061.106a1 1 0 00.691.44l3.524.515-2.549 2.484-.082.09a1 1 0 00-.206.795l.601 3.506-3.15-1.656-.111-.05a1 1 0 00-.82.05l-3.15 1.656.602-3.506.013-.122a1 1 0 00-.301-.763l-2.55-2.484 3.525-.515a1 1 0 00.752-.546L12 6.258z" />
      </g>
    </svg>

How do I go about filling the inside of the shape (without changing the svg source)? I've tried this without success:

css-selectors svg css
1 Answers

Your star has two outer and inner contours.

enter image description here

Therefore, only the space between the contours will be filled with color.

To avoid this you need as @enxaneta commented:

remove everithing from the secomd M command: use just the first part of the d attribute d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z

<style>
.star g path  {
fill:red;
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <g>
    <path fill="red"  d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
  </g>
</svg>

As a bonus Examples of animation of filling a star

feFlood flood-color="red" - Implements fill with color

The feOffset filter animates the color filling process by changing the dx dy attributes

#1. Vertical fill animation

.star g path  {
fill:white;
stroke:red;
filter: url(#red_fill);
}


 
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter  id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
      <feFlood flood-color="red" />
      <feOffset dy="-24">
         <animate 
           id="anim" 
           attributeName="dy" 
           values="-24;0" 
           dur="5s" 
          begin="0s" 
           repeatCount="indefinite" 
           restart="whenNotActive" 
           fill="freeze"/> 
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>   
  <g>
    <path   d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
  </g>
</svg>

#2.Color fill horizontal animation

.star g path  {
fill:white;
stroke:gold;
filter: url(#red_fill);
}
<svg class="star" width="99px" height="99px" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="border: 1px solid">
<filter  id="red_fill" x="-10%" y="-10%" width="150%" height="150%">
      <feFlood flood-color="gold" />
      <feOffset dx="-24">
         <animate 
           id="anim" 
           attributeName="dx" 
           values="-24;0" 
           dur="5s" 
          begin="0s" 
           repeatCount="indefinite" 
           restart="whenNotActive" 
           fill="freeze"/> 
      </feOffset>
      <feComposite operator="in" in2="SourceGraphic" />
      <feComposite operator="over" in2="SourceGraphic" />
    </filter>   
  <g>
    <path   d="M8.8 8.094l-5.009.73-.113.03a1 1 0 00-.44 1.682l3.623 3.529-.85 4.986-.013.11a1 1 0 001.44.944L12 17.746l4.48 2.355.1.047a1 1 0 001.35-1.101l-.855-4.986 3.624-3.529.078-.085a1 1 0 00-.631-1.62l-5.01-.733-2.238-4.537a1 1 0 00-1.794 0L8.864 8.094z"/>
  </g>
</svg>

user_73948710
Related