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>
These shapes all display properly, but for some reason there is a HUGE vertical gap of like 10,000px between the first 2 shapes and the remaining shapes. When I open the page I have to scroll down a lot of white space to see the rest of the shapes. I have not been able to figure out what is causing that.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="2000" height="2000">
<circle cx="80" cy="80" r="50" fill="green" />
</svg>
<svg width="2000" height="2000">
<rect cx="80" cy="80" r="50" fill="blue" />
</svg>
<!-- THERE IS A WEIRD GAP HERE -->
<!-- SVG Rounded Rectangle
Example -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<!-- SVG Star
Example -->
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<!-- SVG Logo
Example -->
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
I'm just learning the SVG format and am trying to create a radial gradient with a reflect spreadMethod, but my browsers (Chrome, Firefox, IE) all seem to be rendering it incorrectly. As you can see in the screenshot below from the MDN gradients tutorial page, only the default value, Pad, seems to work. The left, titled "Screenshot" is how they're stating it should look and the right, titled "Live sample" is how my browser actually renders it. repeat and reflect have hard, non-gradient edges.
It also behaves this way in my own attempts. Here is the code from the "Live Sample":
<svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="GradientPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="pad">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="blue"></stop>
</radialGradient>
<radialGradient id="GradientRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="repeat">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="blue"></stop>
</radialGradient>
<radialGradient id="GradientReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="reflect">
<stop offset="0%" stop-color="red"></stop>
<stop offset="100%" stop-color="blue"></stop>
</radialGradient>
</defs>
<rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"></rect>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"></rect>
<rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"></rect>
<text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
<text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
<text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>
</svg>
What can cause this?
I have the following graphic embedded into markup:
<div id="svgContainer" >
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
preserveAspectRatio="xMaxYMin meet"
viewBox="0 0 1800 1111">
<defs>
<linearGradient id="gradient" x1="0" y1="00%" x2 ="0" y2="100%">
<stop stop-color="black" offset="0"/>
<stop stop-color="white" offset="1"/>
</linearGradient>
<mask id="masking" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<rect y="0.3" width="1" height=".7" fill="url(#gradient)" />
<circle cx=".5" cy=".5" r=".5" fill="white" />
</mask>
</defs>
<foreignObject width="100%" height="100%"
id="coverImageContainer" mask="url(#masking)">
<img id="coverImage" src="/images/v3/eminem-cover.jpg" />
</foreignObject>
</svg>
</div>
On Safari and Chrome, the graphic resizes appropriately using the center of the graphic as the appropriate anchor point. On Firefox, however, the image resizes as thought I had set preserveAspectRatio on the svg element to xMinYMax meet. Any ideas what's causing this discrepency in behavior?
I just started with SVG. simple things like
<svg>
<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" stop-opacity="1" />
</linearGradient>
<mask id="Mask">
<rect x="0" y="0" width="200" height="200" fill="url(#Gradient)" />
</mask>
</defs>
<rect x="0" y="0" width="200" height="200" fill="#222" mask="url(#Mask)" />
</svg>
In this jsfiddle I have this svg with on other one. However, it only shows the one first defined. Can someone explain why and how to fix this ? Thnx!