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 评论：

从第二个 M 命令中删除所有内容：仅使用第一部分 d属性的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.08a0-.-8-3.529.07 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>

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

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