I want to do apply a rotation to a rect element in svg, such that the two ends of the rect however are excluded from the rotation. The following image should depict what I mean by that:
the first rect will look like the third one after a normal rotation. What I want however is the second one where the two left right ends of the rect are not touch on their vertical axis. What is best way to achieve this effect?
Related
I have an already drawn SVG as shown below. It has a set of vertical paths.
Is there any simple way to get the x coordinates of each of them?
By default, the anchor for the text element in SVG is at the bottom left, but I want it to be at the top left, since I am also creating a rectangle to act as the background for the text, but it is displayed incorrectly since the text is higher than the rectangle (because rectangle anchor/offset is at the top left). Is there a way to fix this, so both text and rectangle can be drawn at same coordinates and be displayed in the same location.
The dominant-baseline property/attribute worked for me:
svg {
dominant-baseline: hanging;
}
The coordinates (x and y) you supply for text elements is used as the baseline of the text. This makes sense because if there is text with varying font sizes on the same line, you would want their baselines to line up.
There is no "automatic" way to do what you want. SVG elements are always absolutely positioned.
You will just have to move the text down a bit by making the y coordinate a bit larger.
Alternatively, you could add a dy attribute to shift the text down a bit. Or even use a transform attribute to do the same. But using either of those methods wouldn't really be simplifying the process for you.
I want to combine two SVG paths such that
1.Both paths will be there but, at the area of intersection, there will be no strokes.
2.Second path will be excluded and there will be a complete stroke
See image at http://s18.postimg.org/et4m803rd/shape_combinations.jpg
I want similar function also in HTML5 canvas.
The purpose of this scenario is to implement a lasso selection tool (freehand selection) similar to that of photoshop, with Ctrl and Alt options for adding and subtracting selection [ + some other functions ].
What have you tried? This sounds a little bit like a homework assignment.
The first one is easy to replicate. Just draw the two circles with the stroke, then draw them again in the same place without the stroke.
You can achieve the second shape (the "pacman") by drawing a purple circle on the right that is clipped by a circle that is in the same position as the left (black) circle.
I'm trying to animate a triangle around a given point. I want the shape to animate using the corner (on the right hand side) as it's anchor point but at the moment I can only seem to get it to animate from what I think is it's center. How do I do this?
http://jsfiddle.net/3LXXQ/
you can add origin co-ordinates to the rotation transform.
path_p2.animate({transform: "r360,456.933,372.57"}, 2000);
Here's your updated fiddle
This question already has answers here:
How can I cut one shape inside another?
(4 answers)
Closed 6 years ago.
So basically as my title says, I want to "cut a hole" in a rect element.
I have two rect elements, one on top of the other. The one on the bottom has a fill colour of white, and the one on the top has a fill colour of grey.
What I want to do is cut a triangle out of the top rect element so that the rect element below shows through.
This svg element is going to be used as an audio button for a media player on a page. In other words, you'll be able to click (or drag) your mouse left/right and the change in audio level will be represented by a change in the width of the rect element on the bottom, which shows through the triangle cut out of the top rect element.
I hope that's not too confusing. :P
Here is a quick mockup of what it should look like: http://forboden.com/coding/s1.png
Here is my code: http://forboden.com/coding/svgClipTest.html
Where am I going wrong here?
You should be able to use the fill-rule: evenodd(default) property to achieve this effect, if you want to prevent the fill of the rectangle from painting where the circle is. See this example from the SVG specification:
The key point is draw outer shape and inner shapes(holes) in different direction (clockwise vs anti-clockwise).
Draw the outer shape clockwise and draw the inner(holes) shapes anti-clockwise.
Or conversely, draw the outer shape(holes) anti-clockwise and draw the inner shapes clockwise.
Concat the path datas of outer shape and inner shapes(holes).
You can cut more holes by concat more hole path data.
This image explain how to cut a hole:
I see that you have it solved already, just wanted to add that if you want something more advanced then it's often quite easy to use a <mask>, see http://dev.w3.org/SVG/profiles/1.1F2/test/svg/masking-path-11-b.svg for example.
However, if you can avoid masking and clipping (e.g by just drawing things on top) that usually leads to better performance/user-experience.
Easiest way is to use <path> with the hole, and set pointer-events to none so events can pass through to the <rect> under. Of course there are many other ways to handle events such as wrapping them with a <g> and handling events on it.
You don't need to limit yourself to the basic shapes and use complicated clipping. Make things felxible enough so you can copy&paste path data generated by tools like inkscape.