In my app I'm create an SVG scene which include an image - the scene background, and some shapes (rect, circle) on it.
on the svg element im setting a view-box for working with logical unit and not with pixels for example.
so, on the svg element i'm setting the preserveAspectRatio attribute to be "xMidYMid slice", same on image - the background scene inside.
everything looks as expected, except the that now the position x=0, y=0 is not where it's supposed to be, the x=0, y=0 is according to where the scene was before it was "sliced", although the SVG element width and height is the same.
I need that the x=0,y=0 be where it should be, on the left corner of the scene.
Thanks for your help.
N, St.
If you don't want the origin (top left) of the SVG to move, then try:
preserveAspectRatio="xMinYMin slice"
Perhaps this was what you were after?
Related
I am confused how to properly define viewport and viewbox in SVG file to convey shapes that have real world physical units.
I am mapping my AutoCAD design to a SVG file. The units in my AutoCAD file are defined in millimeters (mm). Image below shows my AutoCAD design. The orange box (16mm x 9mm) are my boundaries for visible part of the SVG file, thus anything outside the orange box will get cut off. My end application requires a PNG image that is a specific resolution, 1920x1080. (Notice how the aspect ratio is the same).
In my SVG file, all shapes (elements) are defined without units, however I know the values are in millimeters in the physical world. For example, below is an example of a circle. The radius of the circle is 0.474mm as set in the AutoCAD file.
<circle cx="1.22996130982" cy="2.27139057943" r="0.474" />
My question is, how do I properly define the viewport and viewbox in my SVG file? How do I properly define the viewport/viewbox such that the physical units in real world get scaled to fit in my desired image resolution?
I used the following method below to define my viewport/viewbox. However, this approach did not work. The resulting SVG image was a canvas of 1920x1080 however all my shapes were very tiny and it did NOT cut off the shapes desired outside the orange boundary box.
<svg width="1920px" height="1080px" viewbox="0 0 16mm 9mm">
<circle cx="1.22996130982" cy="2.27139057943" r="0.474" />
<!-- Other shapes in SVG here-->
</svg>
Is there a possibility to make a part of svg rect transparent? f.x. it has width 100px, and between 40 and 70 px it is transparent. Problem is - the central part should be really transparent and show elements below, it should be not filled with background color like mask.
Thank you in advance.
Use a clipPath to define which parts of your SVG should be transparent.
Complete example here.
Here are the facts:
I have a div with rounded corners containing an SVG element with rounded corners that creates a circle.
Inside the circle (SVG) I am drawing four polygons that make out different circle quadrants.
The polygons respond to hover by changing color - so that when a user mouse is over a specific quadrant in the circle - it lights up.
The SVG and the div containing the SVG both have overflow:hidden CSS directive.
When I mouse over an area outside the circle (but inside the clipped rectangle of the polygon) - the corresponding quadrant lights up...
Why is the element responding to mouse over even though I am hovering over a clipped area?
How can I make sure this will not happen? (without creating occluding transparent elements - I want to be able to touch something in the layer below...).
EDIT:
added fiddle as requested:
http://jsfiddle.net/JVQD8/
In the fiddle - note that the surrounding div is bordered with a red line.
the polygons (in blue) are clipped by the red border (div), and when you hover over a polygon it becomes a lighter shade of blue.
The polygon highlights outside the area of the red circle border if on the polygon.
Edit:
As commented by Robert Longson, there is no problem at all in Firefox.
However, in chrome the problem is as described, and in IE the SVG polygon is not even responding to hover.
So the question about chrome remains as is - only in chrome. How do i know if this is a bug that i should report, or if this is a designed behavioral difference?
Try experimenting with the pointer-events attribute.
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/pointer-events
i drawn one line in SVG using "path" tag and then i drawn circle on the same x value of line but the circle is behind the line. i want the circle element in front of line. how to set z-order or z-index to particular group or element in svg to display the element in front.
i tried z-Index attribute to circle but its not working .
<circle .... z-Index=1000>
</circle>
Thanks,
Siva
SVG elements do not have a z-index that you can adjust. Their layering order is dependent on what order you draw them in the HTML. Moving an SVG object to the top, for example, is a matter of removing it from the DOM and appending it to the object's parent. Since it is the most recently drawn SVG object, it will therefore be shown on top.
I've a question about svg's viewbox, in my opinion it's like a window on an infinite svg plan, and its boundaries are set in the viewBox attribute of the svg element. It represents the rectangle between the 2 coordinates in the svg plan. So a viewBox of "0 0 1000 500" shows the window between (0,0) and (1000,500) of the svg plan.
And when I make viewBox (2000, 0, 3000 500) i see the window of (2000,0) and (3000,500). x and y scaling is unmodified: in both cases i'm displaying 1000 * 500 units of the svg plan.
But apparantly i go wrong some where. I'm experimenting with animating the viewbox to emulate some kind of ticker display, leaving the y coordinates untouched but changing the x coordinates (without changing the actual number of units displayed) but that goes wrong. Somehow my y-scaling changes.
In a modern browser you can verify yourself (pull the slider to change the viewBox).
What did I miss in the SVG specification?
You missed the preserveAspectRatio attribute in the SVG specification. It forces the aspect ratio of what you see in the viewbox to be preserved by default. Sounds like what you're after is preserveAspectRatio="none"