css - SVG 填充规则被忽略

Question

假设我有这个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>


    

如何填充形状的内部(不更改 svg 源)？我已经尝试过但没有成功:

Answer 1

你的星星有两个外部和内部轮廓。

因此，只有轮廓之间的空间才会填充颜色。

为了避免这种情况，您需要像@enxaneta评论的那样:

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>

作为奖励，填充星星的动画示例

feFloodFlood-color="red" - 实现颜色填充

feOffset 过滤器通过更改 dx dy 属性来动画颜色填充过程

#1。垂直填充动画

.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.颜色填充水平动画

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