CODEWITHSUNDEEP
csssvgcss-shapes
ttmt
ttmt

Reputation: 4984

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>

Upvotes: 17

Views: 10445

Answers (3)

David Lee
David Lee

Reputation: 96

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>

Upvotes: 5

Michael Mullany
Michael Mullany

Reputation: 31715

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>

Upvotes: 19

Tolokoban
Tolokoban

Reputation: 2339

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.

Upvotes: 17

Related Questions