Outlining and partially filling an SVG Shape

问题

I have a jsfiddle here - http://jsfiddle.net/apbuc773/

I\'d like to create a star using svg.

I\'d like to stroke the outside of the star. In my example the stroke is on every line which dissects the inner shape.

Also is it possible to half fill the star shape.

I\'d like to use this for a star rating but I need half and maybe quarter fills.

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

回答1:

You can alternatively do this with a filter. Here is one that animates the fill:

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

回答2:

Here is a example: http://jsfiddle.net/apbuc773/11/

Gradient can be used like this:

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

If you don't want to change your polygon points, just apply this polygon twice: one time with stroke and one time without.

回答3:

I've noticed the comment of the accepted answer, and here is how you fill an custom shape:

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

来源：https://stackoverflow.com/questions/29368138/outlining-and-partially-filling-an-svg-shape