Outlining and partially filling an SVG Shape

Question

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 s

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

Answer 2

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>

Answer 3

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.