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.
Related
Using flex I have two adjacent div(s), where the first container will dynamically set the height based on the content, and the latter will follow be 100% of its height.
In the latter div, an SVG document at full height draws a polyline. However, despite the SVG document resizing its height, the polyline point are fixed in absolute values, thus not responsive.
At normal width:
Once the width is shrunk:
intended result should scale:
Would it somehow be possible to set points relative to SVG document size, or perhaps set some point from 0,0 axis and the rest from the bottom?
JsFiddle:
https://jsfiddle.net/khaled_nabil/jov9cstg/4/
One solution is change your preserveAspectRatio to none, but that will stretch the stroke as well.
preserveAspectRatio="none"
updated fiddle: https://jsfiddle.net/majnhguz/
Update:
You can address that by by using this on your path:
vector-effect="non-scaling-stroke"
updated fiddle: https://jsfiddle.net/rv9kup7z/
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?
I am a newbie of CSS3, and recently I am learning the border-image attributes, when I read the W3C documents:
http://dev.w3.org/csswg/css-backgrounds/#border-image-width
I found the following lines:
The border image is drawn inside an area called the border image area.
This is an area whose boundaries by default correspond to the border
box, see ‘border-image-outset’.
so, what exactly the "border image area" and "border-box" mean? and what's the effects of border-image-width and border-image-outset?
I think the W3C documents don't explain it very clearly.
thanks in advance!
The border box is defined as everything within the outer perimeter of the borders of a box, including the borders themselves, if any. This definition is given in this section of CSS2.1. If there are no borders, then it's the perimeter of the padding box (or, if there's no padding either, then the content box). The border image area is defined as the entire area of the border box, including the padding and content.
So if you have a box with a border width of 30px, then the border image fits into the 30 pixels surrounding the box by default. When you specify a value for border-image-outset, the image is rendered that set distance away from the border area, making it appear further away from the padding/content edge.
Note that border-image-outset by itself does not stretch the border image; it only shifts the border image area a set distance away from the border area. If you want to stretch the image as well, combine border-image-outset with border-image-width.
My understanding of them isn't perfect, but, from use I have found that:
The border image area is the area surrounding your content. If you set a 1px border, then it's 1px. If you use an image of say, 90 pixels in height for a border, and the border is 30px, like so...
XoX
o o
XoX
So X is the corner, o is a side. Anything in this area is the border box.
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 :)
Suppose I have some arbitrary input image with width w1 and height h1. I want to rotate this image all the way around 360 degrees back to the starting position. However, if the image is of anything except a circle, then the edges of the image will be clipped if the canvas it is drawn onto remains at size w1 by h1.
What I need then is to determine the canvas size (width w2 and height h2) that can be used for all rotated versions of the input image. I know that w2 == h2, and thus the desired canvas size is a square, because it is obvious that we are rotating something about a center point, and the final image (after 360 rotations) is essentially a circle.
The other thing to consider is that objects such as squares will have corners that will stick out, so just using the max value of width or height for both dimensions also does not work.
One solution I have come up with is to create the canvas larger than I need (for example by setting w2 and h2 to max(w1, h1) * 2, rotating everything, and then trimming all the transparent pixels. This is not very efficient and I would much rather be able to calculate the tightest bounding box upfront.
This is a geometry question. You essentially want to find the diameter (d) of a circle that would inscribe your original canvas and then w2 = h2 = d
The diameter of such a circle would be √(w1^2+h1^2)
So w2 = h2 = √(w1^2+h1^2)
Also, to avoid clipping, you might want to take the ceiling of that result rather than rounding.
If the image being rotated in a square, you'd have to make the canvas height and width the same length as the hypotenuse.
w = h = sqrt(h^2 + w^2)
(I do not know actionscript)
However, if the image you have is not in a square, you'll essentially have to find the point farthest away from the center...
PS: It's late and I'm rambling, so I'm sorry if this might be wrong.
Your canvas need to be a square.
If you are going to rotate a body like the green figure around any point (in this example Point A), the side of the square is the double of the distance to the most distant point to A in the body.