I started learning SVG. Using polygons I have created a Star. While further reading I found a fill-rule property which can take two attributes first one is nonzero which will fill colour in whole the shape and another one is evenodd which will fill colour in odd points and even points will remain unfilled. When I used evenodd it filled the outer part of the star and left the centre blank.
How can I fill the centre or even points only of the star?
<!DOCTYPE html>
<html>
<body>
<svg height="210" width="500">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/>
Sorry, your browser does not support inline SVG.
</svg>
</body>
</html>
This will generate a star ditto to the 1st imageSide-Filled star
and I want only center to be filled check 2ndimage.Cneter fill star only
evenodd which will fill colour in odd points and even points will remain unfilled.
That sounds to me like you are misunderstanding what even-odd fill is. The description from the SVG specification describes it this way:
This rule determines the "insideness" of a point on the canvas by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ray crosses. If this number is odd, the point is inside; if even, the point is outside.
So in the case of your star, an imaginary line from a point in the centre of the star to the outside of the star always crosses two lines. So the inside is not considered part of the fill.
How can I fill the centre or even points only of the star?
I don't know what you mean by this. What are the "even points" of the star?
Do you mean that you want to choose which of the six parts (center + 5 points) of the star get filled? If so, then fill-rule won't help you. You will need to create and fill those shapes yourself.
For example:
<svg height="210" width="500">
<!-- centre -->
<polygon points="78,78 122,78, 136,121 100,150 64,121" style="fill:lime;"/>
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:none;stroke:purple;stroke-width:5;"/>
</svg>
Related
Context
I want to get an arrowhead on a path to a node in a graph that I am making. Because I am using bezier curves it is easier to use the center of the points to / from which the path ends / starts respectively.
In the attached JSFiddle (below) we see a simple triangle of points, one of which is the control points for a quadratic bezier curve. In addition the end markers have been offset to make contact with the node rather than being partially behind it; this is due to paths being drawn to the centers of the points rather than the edges.
Aesthetically there are a few things not quite right with this drawing:
the tip of the arrow head is thiner than the path
although the tip is angled correctly for the arrowhead on the bezier curve, the path is not centered at the point the arrow head appears.
These aesthetic flaws occur because:
the point of an arrow head is obviously thiner than a path / the path extends through the node
the arrow head is so large in respect to the curvature of the path, there is no satisfactory solution to the arrow head problem (given the current code)
Now one could jury-rig the second issue by making a tight cubic bezier curve as done in the second SVG of the JSFiddle.
However, as seen in the third SVG, this does not work with extreme curvature either.
Questions
Is there either a simple way to ensure that the angle of the arrow-head's point and positions of the path when the arrow head joins are centered; alternatively a way to simply scale the arrow head to be small enough where one would not notice?
Is there a way to make the path starting at the arrowhead to the end invisible? / alternatively a simple way to get paths to end prior to hitting the node?
# code to meet SO requirements
# look at this code
JSFiddle
SVG Marker Demo
For your specific application, try adding a viewBox to the marker to make it smaller so it looks somewhat aligned with the end of the bezier. (SVG markers do not currently align with curves.) Change refX to 'slide' the arrow a bit forward to the end of the line.
e.g.
<marker id="arrow" viewBox="0 0 25 25" markerWidth="20" markerHeight="10" refX="20" refY="5" orient="auto" markerUnits="strokeWidth">
Why not just make the markers use your coordinate system, instead of strokeweight:
<marker id="arrow" markerWidth="40" markerHeight="30" refX="25" refY="-5"
orient="auto" markerUnits="userSpaceOnUse" overflow="visible">
<!-- path for the arrow head -->
<path d="M-18,10 l 6 -15 l -6 -15 l 40 15 l -40 15 Z"
fill="white"
stroke='black'
stroke-width='3'
opacity='1' />
</marker>
Sorted. If we draw the paths after the "points" so that the arrow heads end up on top:
Can I fill outside of html <polygon> or <path> like the below image?
<div style="background:'image.png'>
<svg style="background:rgb(100,100,230)">
<polygon points="x,y x1,y1 ..."
style="fill:???;fill-rule:???"/>
</svg>
</div>
I can definitely fill inside of <polygon> or <path>. But how can I fill outside of them? I know one work-around which uses outer polygon enclosing the outside of the star. Is there a simple way?
I haven't found a way to fill the outside of a polygon. But you can produce the same effect, though it's a bit messy, like this.
Start somewhere outside your canvas. Create a path that goes from there to a point on the near side of the perimeter of your polygon, follow round your polygon - let's say we do this clockwise - all the way back to where you joined it, carry on clockwise to a point outside your canvas, and then go round the outside of your canvas, anticlockwise, in a big rectangle, back to where you first started.
You can't "fill outside" of a shape. But you can put a shape behind it.
In your example, you would have a blue square and then in front of it put a star-shaped clipped image.
I am new to this. I want to make a clock similar to the one given here. But they have used images. Instead I want to make use of ARC. Does anyone know, how can we make an arc, that too using only css? Consider an example that I have to make an arc of 15 degrees. Any kind of suggestions are greatly appreciated.
Thanks in advance.....
I'd recommend you use SVG to do this. The markup is fairly simple, but you'll need to stay aware that there are four different rules which affect which side of the two end points the bulge of the arc with lay and if the bulge will try to take the "short way" or the "long way" with the given radius.
Here's an example. Use a stylesheet like this:
.arc{
fill:tan;
stroke:red;
stroke-width:4px;
}
combined with an svg path like this:
<svg width="100" height="100">
<path d="M 10,40 A 50,50 0 0 1 90,70"/>
</svg>
In short the commands in the above example are
M (move mode with absolute coordinates)
x,y (start the arc here here)
A (arc mode with absolute coordinates)
r1,r2 (the two radius of the ellipse that the arc goes around. use the same value twice for a circle)
z rotation (the rotation of that ellipse. 0 is no rotation)
large arc flag (see fiddle link below)
sweep flag (see fiddle link below)
x,y (where the arc will end)
I made this fiddle to demonstrate all the different combinations of the two flags in movement which helps me a lot in deciding which ones to use. http://jsfiddle.net/rgbk/avpye8nm
The W3C docs are here: http://www.w3.org/TR/SVG11/paths.html#PathDataEllipticalArcCommands They describe z rotation as "x-axis-rotation" which is wrong.
Does it have to be CSS ? or could you use HTL5 canvas?
http://www.w3schools.com/tags/canvas_arc.asp
then you could use that canvas to do the animation instead of using CSS animations...
I need to draw a 1px grid (10px spacing) using the SVG canvas embedded within a webpage. There are many SVG tags to choose from and I was hoping someone could suggest what tags would be best suited for the job and produce the least amount of code.
For instance, is there a shorter alternative to plotting the path using the <path> tag? Perhaps by defining a square 10px x 10px then somehow repeating it accross the canvas.
Anyway, open to suggestions please.
Thanks
You can make a <pattern> (essentially the tile in your question) and fill any shape with that.
Here's an example of that technique.
I'm not an expert (day 3!), but I do know that Google uses rects to do this on Google charts, with either a width or a height equal to 1. Nothing fancy, just write the grid with lots of stuff like this:
<rect x="86" y="61" width="1" height="198" stroke="none" stroke-width="0" fill-opacity="1" stroke-opacity="1" stroke-dasharray="0" fill="#cccccc"></rect>
Why do they do this? Don't know. Their graphics are good, so someone has presumably thought about it. My own inclination is to do this with paths, using 'h' and 'v' for relative horizontal and vertical lines. It's more compact, but the output may not be so good.
SVG has a rectangle element which dimensions could be specified in percent of dimensions of its owner and radius in pixels. So by doing the following
<div style="position: relative;">
<object class="AIRound" type="image/svg+xml"
data="data:image/svg+xml,<svg
xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%'
height='100%' rx='10px' ry='10px' fill='#99ff99'
opacity='0.9'/></svg>" style="position:absolute; left:0px; top:0px;
width:100%; height:100%; z-index:-100;"></object>
Sample text<br>Sample text
Sample text<br>Sample text
</div>
I can get a with rounded corners with the constant radius which doesn't depends on the block size. But a simple rectangle with rounded corners it's boring and sometimes you want something fancy (e. g. http://my.opera.com/). I've tried to use 'path' element but it seems to me we can't use mixed units with 'path' (pixels & percents). I can't use a combination of shapes either because it won't work semitransparents and gradient fill.
So my qeustion is can I use 'path' element with mixed units? Maybe there's another work around which I overlooked?
Paths and point-lists can only be specified in user units. By having a container (e.g an svg or symbol element) that specifies a new coordinate system with 'viewBox' it's possible to affect what the user units resolve to. That still doesn't solve all cases.
To fix a few more cases you can build the image using multiple shapes each with a different clip-path to clip away the parts that are undesirable. You can have a look at the Rounded Corner Generator SVG output for an example of that approach.
Unfortunately, path coordinates can only be expressed with a single unit, Viewport Coordinates.
There is a workaround:
<svg width='100%' height='100%' viewBox='0 0 100 100'>
<!-- Now in here, a coordinate (25,50) corresponds to
(25%,50%) of the outer viewport. -->
<path d="M36,96 C 54,100 94,73 97,61 ..."/>
</svg>
Ref:
http://mozilla.6506.n7.nabble.com/Specyfing-paths-with-percentages-unit-td247474.html