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
Related
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>
I create flat line in using d3
<path d="M76.75,75.00981241717429L230.25,75.00981241717429L383.75,
75.00981241717429L537.25,75.009812417174291" stroke="#657DBB" class="line"
style="stroke-dasharray: none; stroke-width: 5; stroke-opacity: 1;">
Draws lines but in devtools have 0px height and when I use mask for limiting drawing area, mask covers all 0px elements, someone can help ?
What you see is the expected result. For calculating the bounding box of an element the .getBBox() method is used. The behavior of .getBBox is defined by the SVG spec in 4.5.23 Interface SVGLocatable (emphasis mine):
Returns the tight bounding box in current user space (i.e., after application of the ‘transform’ attribute, if any) on the geometry of all contained graphics elements, exclusive of stroking, clipping, masking and filter effects).
Since all the y-coordinates of your path's move and line-to commands equal 75.00981241717429 the height of the bounding as defined by the spec obviously is zero.
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 embed a SVG file into HTML file, the SVG's dimensions are bit larger. so, I need the SVG to be re-sized to the screen resolution. Is there any way to do that? Thanks.
If you want an SVG file to fit in a container the first thing to do is to set a viewBox attribute and remove width and height attributes from the root <svg> element:
<svg viewBox="0 0 100 200" ... >
The values of a viewBox are: x y width height. Read more in the SVG specification.
I dont know how complex is that SVG, but at least you can put whole description under one group , and then use transform="scale(SF)" whereas "SF" stands for scaling factor. Default is 1 (100%), so use little script:
TransFrm = "scale(" + SF + ")";
yourElement.setAttributeNS(null, "transform", TransFrm);
Or if you mean resizing by viewBox then <rect x="0" y="0" width="100%" height="100%"/>.
Or if you mean something else take a look at: http://janistoolbox.typepad.com/blog/2009/12/svgauto-resize-svg-on-an-html-page.html
Good luck.
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.