概述和部分填充SVG形状

小编典典

概述和部分填充SVG形状

css

我在这里有一个

我想使用svg创建星星。

我想抚摸星星的外面。在我的示例中，笔画在剖析内部形状的每一行上。

也可以将星形填充一半。

我想将其用于星级评定，但是我需要一半甚至四分之一的填充量。

    <svg height="210" width="500">
      <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:red;stroke:blue;"/>
    </svg>

阅读 274

2020-05-16

共1个答案

小编典典

您也可以使用过滤器执行此操作。这是一个动画填充：

<svg height="210" width="500">

  <defs>

    <filter id="fillpartial" primitiveUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">

      <feFlood x="0%" y="0%" width="100%" height="100%" flood-color="red" />

      <feOffset dy="0.5">

        <animate attributeName="dy" from="1" to=".5" dur="3s" />

      </feOffset>

      <feComposite operator="in" in2="SourceGraphic" />

      <feComposite operator="over" in2="SourceGraphic" />

    </filter>

  </defs>

  <polygon filter="url(#fillpartial)" points="165.000, 185.000, 188.511, 197.361, 184.021, 171.180,

 203.042, 152.639,

 176.756, 148.820,

 165.000, 125.000,

 153.244, 148.820,

 126.958, 152.639,

 145.979, 171.180,

 141.489, 197.361,

 165.000, 185.000" style="fill:white;stroke:red;" />

</svg>

2020-05-16