I was going through the MDN website to learn about the clip-path property. Here is the link : https://developer.mozilla.org/en/docs/Web/CSS/clip-path
Now, I understand most of what the website says but I don't understand the following parts. Could anyone please explain them to me preferably with a demo?
<geometry-box> If specified in combination with a <basic-shape>, it provides the reference box for the basic shape. If specified by itself, it uses the edges of the specified box including any corner shaping (e.g. defined by border-radius) as clipping path.
fill-box uses the object bounding box as reference box.
stroke-box uses the stroke bounding box as reference box.
view-box uses the nearest SVG viewport as reference box. If a viewBox attribute is specified for the element creating the SVG viewport, the reference box is positioned at the origin of the coordinate system established by the viewBox attribute and the dimension of the reference box is set to the width and height values of the viewBox attribute.
My questions are what exactly is a geometry-box and what does reference box mean in the context of clipping?
How is a reference box useful during clipping?
What is a stroke bounding box? Is it related to SVG?
Can you please provide a working example with all these values?
Related
Which part of the box model does the outline property belong to? Is the outline css property part the margin?
The outline property is not part of the CSS Box Model.
18.4 Dynamic outlines: the outline
property
Outlines do not take up any space.
The outline created with the outline properties is drawn "over" a box,
i.e., the outline is always on top, and does not influence the
position or size of the box, or of any other boxes.
Since the outline does not affect formatting (i.e., no space is left
for it in the box model), it may well overlap other elements on the
page.
I have begun working with SVGs and have (quickly) hit a road block.
I am trying to find a way to and a border around a rectangle but for it to only "expand" inside. Currently I am just drawing a path around the rectangle and using stroke width. This has the desired effect of showing a "filling" animation when used with css transition. But I don't want it to expand outside of the bounds of the rectangle. See images
with path
As you can see the stroke width is going in both directions, outside of the bounding rectangle and inside. How would I get rid of the outside bit?
Draw the <rect> within an inner <svg> element which is the same size as the <rect>. The inner <svg> element will clip the <rect>.
You can also do this with a clip-path or a clip if you want but the inner <svg> way is simpler.
I don't believe it is possible to have the stroke only appear on one side of the line (someone correct me if that's wrong).
Here are two approaches to achieving the effect you want:
Approach #1:
Simply put the bounding rectangle before the filled inner rectangle in your SVG. The filled rectangle will be "above" the bounding rectangle due to SVG precedence rules, and if you expand it to the right size it will cover up the inside part of the bounding rectangle's stroke.
Approach #2:
Set the stroke-width to half its current value, then draw the bounding rectangle half a stroke width further out in all directions.
I need to create this shape :
The bounds are not clear in this picture but in real this is regular curve.
The inner circles are my inner elements.
I have some challenge with implementing this element :
I useed <div> and i can't the top border with border-radius and any another method.
Used <div> and set background-image for it but i have problem in bounds and i want to change mouse cursor exactly in element bounds.
I used <img> and set <map> and <area> for it for setting my bounds but i have problem with my inner elements.
Finally i used HTML5 and canvas element but for inner elements,the circles , i can't find any regular solution.it's very important the bounds for element
How can i implement this object?
You can pretty much use HTML5 Canvas. From your question I read you cannot determine the bounds of the circle to change the cursor. Detecting whether cursor is inside a circle is pretty easy actually. You'll definitely have the x,y positions of the center of circle along with the radius right ? So all you need to do is check if the distance between the cursor's x/y coordinates and the center of the circles is less than (or equal to) the radius or not. If yes, then it's inside the circle, else it's outside :)
I am developing a paint board application using flash builder. User can draw some shapes objects(ellipse, circle, rectangle). I want to implement grouping/un grouping feature some like ms-word in my application. I group multiple objects by putting them inside a container(UIComponent). Now i apply resizing to container and it resize well. I am using a free object handler API to apply selection handle over the container. I want to resize and reposition all children with respect to container changed size. Every thing goes well until all children inside container are having rotation = 0. But if there is any child which is having rotation >0 and <0 things goes worse. The child resize but not in a proper manner. I stretch the parent container width and it increase the height of rotated child. Is there any way using Matrix class or something else to transform all children in same direction and same ratio respective to container?
Are you using Flash Professional? In my experience, placing objects within a symbol is the best route has been easiest to achieve this for me.
Select all the objects you want to link together (can also include existing symbols)
Right click and select 'Create Symbol'
Name the symbol what you'd like, then click okay
You can then freely transform any instance of that symbol, which retains the relationship between the objects within (including rotation).
I have tried many variants of the svg parameters, but have had no joy in scaling this particular SVG.
I am trying to contain this SVG into a container element that controls the size of the SVG.
I'm aiming for 500x309px.
What combination of width, height, viewBox and preserveAspectRatio can help me achieve this without having the SVG masked or cropped?
You absolutely must have a viewBox attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)
To cause your SVG to fill an HTML element, put the CSS attribute position:relative (or position:absolute or position:fixed if appropriate) on your wrapper, and then
Set the CSS attribute position:absolute on your <svg> element to cause it to sit inside and fill your div. (If necessary, also apply left:0; top:0; width:100%; height:100%.)
Once you have a viewBox and your SVG sized correctly the default value of the preserveAspectRatio attribute will do what you want. In particular, the default of xMidYMid meet means that:
The aspect ratio described by your viewBox will be preserved when rendering.
By comparison, a value of none would allow non-uniform scaling.
The viewBox will always meet either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
By comparison, a value of slice ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG.
The viewBox will be kept vertically and horizontally centered within the SVG viewport.
By comparison, a value of xMinYMax would keep it in the bottom-left corner, with padding only to the right or top.
You can see this live here: http://jsfiddle.net/Jq3gy/2/
Try specifying explicit values for preserveAspectRatio on the <svg> element and press "Update" to see how they affect the rendering.
Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/
Set the SVG width and height to be the size of its container, and set preserveAspectRatio = none.
<div height="50" width="100">
<svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>
and
$("svg").each(function(){
this.width = this.parentNode.width;
this.height = this.parentNode.height;
}
That's it. Setting CSS is not needed.
I personally set viewBox to be the size of the contents of the SVG. So in my example, the original image I am loading into my SVG is 300x200. It will shrink to fit a 50x100 div. But viewBox manipulation is a separate issue.
Unfortunately, I don't know the answer that applies to raw SVG, but in Raphael.js, I did it like that:
var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);
This technique scaled my SVG to fit the bounds.
Hope this helps.