概述和部分填充 SVG 形状

Question

我在这里有一个 jsfiddle - http://jsfiddle.net/apbuc773/

我想用 svg 创建一个星星。

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

也可以将星形填充一半。

我想用它来评星，但我需要一半，也许是四分之一。

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

Answer 1

这里是一个例子：http://jsfiddle.net/apbuc773/11/

渐变可以这样使用：

<svg height="210" width="500">
    <defs>
        <linearGradient id="half">
            <stop offset="0%" stop-color="red" />
            <stop offset="50%" stop-color="red" />
            <stop offset="50%" stop-color="white" />
            <stop offset="100%" stop-color="white" />
        </linearGradient>            
    </defs>
    <g fill="url(#half)" stroke="blue" stroke-width="2">

如果您不想更改多边形点，只需应用此多边形两次：一次有笔触，一次没有。

Answer 2

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

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

Answer 3

我注意到已接受答案的评论，以下是您如何填充自定义形状：

<svg width="100" height="100" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="heart">
        <path d="M81.495,13.923c-11.368-5.261-26.234-0.311-31.489,11.032C44.74,13.612,29.879,8.657,18.511,13.923  C6.402,19.539,0.613,33.883,10.175,50.804c6.792,12.04,18.826,21.111,39.831,37.379c20.993-16.268,33.033-25.344,39.819-37.379  C99.387,33.883,93.598,19.539,81.495,13.923z"/>
    </clipPath>
  </defs>
  <rect x="0" y="0" fill="rgb(217,217,217)" width="100%" height="100%" clip-path="url(#heart)" />
  <rect x="0" y="50%" fill="red" width="100%" height="100%" clip-path="url(#heart)" />
</svg>