How can i animated fill up a path element with color in a SVG ? In the lower area I added a rect element, that worked fine. But how can i fill up the rest (the head) ?
The SVG looks like this
And here is my SVG code
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110.6 225.5" style="enable-background:new 0 0 110.6 225.5" xml:space="preserve">
<style type="text/css">
.st2{
fill:#FEC400;
}
}
</style>
<g>
<g>
<g>
<!-- mouth -->
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
</g>
<g>
<!-- eye -->
<circle cx="78.3" cy="60.5" r="6.5"/>
</g>
<g>
<!-- eye -->
<circle cx="38.2" cy="60.5" r="6.5"/>
</g>
<g>
<!-- lower -->
<rect class="st2" x="5" y="220" width="24" height="90">
<animate attributeName="y" values="220 ; 100" dur="2.5s"/>
<animate attributeName="height" values="90 ; 120" dur="2.5s"/>
</rect>
</g>
<g>
<!-- figure, needs to fill up with color -->
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</g>
</g>
</svg>
It works with a mask:
<svg width="200" height="190">
<g transform="translate(0,-35)">
<mask id="shape-mask">
<rect x="0" y="0" width="200" height="230" fill="black" />
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z" fill="white" />
</mask>
<rect y="230" width="200" height="0" fill="orange" mask="url(#shape-mask)">
<animate attributeName="y" values="230 ; 0" dur="2.5s"/>
<animate attributeName="height" values="0 ; 230" dur="2.5s"/>
</rect>
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
<circle cx="78.3" cy="60.5" r="6.5"/>
<circle cx="38.2" cy="60.5" r="6.5"/>
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</svg>
<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12">
<animate
attributeName="opacity"
values="0; 1"
keyTimes="0; 1"
dur="1s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle cx="50" cy="50" r="38.48" width="100" height="100" fill="white"></circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
This way animation runs simultaneously for all pattern items.
How to run this sequentially? Start next item animation if the previous one completed?
Instead of animating the circles of the pattern I would animate a radial gradient from white to black, and I would use this gradient to fill the mask circle like so:
<svg viewbox="0 0 100 100">
<defs>
<radialGradient id="rg" cx=".5" cy=".5" r="0.01">
<stop offset="0%" stop-color="white"></stop>
<stop offset="100%" stop-color="black"></stop>
<animate
attributeName="r"
values="0.01; 1"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</radialGradient>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="url(#rg)">
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
SECOND Solution
You may fill the mask circle with white and animate the radius like so:
<svg viewbox="0 0 100 100">
<defs>
<pattern
id="dotted-pattern"
viewbox="0,0,100,100"
height="3.125%"
width="3.125%">
<circle cx="50" cy="50" fill="#10446D" r="12"/>
</pattern>
<mask id="circle-mask" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<circle id="kk" cx="50" cy="50" r="38.48" width="100" height="100" fill="white">
<animate
attributeName="r"
values="0.01; 38.48"
dur="3s"
begin="0s"
repeatCount="1"
fill="freeze" />
</circle>
</mask>
</defs>
<rect
width="74"
height="74"
y="13"
x="13"
mask="url(#circle-mask)"
fill="url(#dotted-pattern)"></rect>
</svg>
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>
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>
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.
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>
Instead of doing the following:
<html>
<body>
<embed src="circle.svg" type="image/svg+xml" />
<embed src="square.svg" type="image/svg+xml" />
<embed src="triangle.svg" type="image/svg+xml" />
</body>
</html>
I would prever to do something like this
<html>
<body>
<embed src="shapes.svg" type="image/svg+xml" id="circle" />
<embed src="shapes.svg" type="image/svg+xml" id="square" />
<embed src="shapes.svg" type="image/svg+xml" id="triangle" />
</body>
</html>
with a svg file that may look something like this
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>
It seems as an SVG is just XML I should be able to store all my images in a single file that downloades a single time and is used throughout the site.
You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.
One way is SVG Stacks which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.
Another way might be to have a shapes.svg like this with all the drawings in different places
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(0,0)">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</g>
<g transform="translate(0,200)">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0,400)">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</g>
</svg>
And then use svgView to show just the bits you want.
<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px; height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
</body>
</html>
All of these do mean though that you use more memory in the UA as the whole svg file is loaded 3 times and you just see a part of it each time.
Yes, but XML documents need a single root node. Yours has three. Try wrapping the three nodes in an svg element and move the namespace and version number to it. Seems to validate via http://validator.w3.org/check
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>
Reference:
<svg alt="">
<use xlink:href="shapes.svg#circle"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#square"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#triangle"></use>
</svg>
shapes.svg:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="circle">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</symbol>
<symbol id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</symbol>
<symbol id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</symbol>
</svg>