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"
Related
I am importing an SVG using the SVGLoader and turning each path into a mesh that is then put into a group. When I do so, the group is much larger than I would like it to be. Rather than scaling, I'd like to import it at the correct size to begin with. When I change the width and height attributes on the SVG: <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25"> nothing changes with respect to the size of the rendered meshes. I haven't seen anything actually describing how SVG sizes are determined by the loader. Is it a viewbox? Is there something special that has to be done?
In your 3d world, you can only change the size of your object by Object3D.scale.set(x, y, z),and the x, y, z value determine the size of your mesh in you 3d world. When you change the width and height attributes on the SVG, you can only change the resolution but not the size
I'm using a <circle> element with stroke-dasharray and stroke-dashoffset to draw an indicator for the focused element of a donut chart, and in Safari it is not coming out right.
The outer pies are <path>s which work fine in all browsers, but as I need the indicator to transition between sectors they need to be <circle>s.
I thought it was because Safari was calculating the circle's circumference based on the svg viewbox or something like that but no dice. Any help would be appreciated.
https://codepen.io/pouretrebelle/pen/d56df310e385a0c2fdedb5bbddc2308d
Rendered in Chrome:
Rendered in Safari:
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?
I am working on an svg export utility for a drawing program on android. I am having a problem that the behind blur is cutoff past the shape boundaries - looks like i need to resize the viewBox or increase the margin or something. Does anyone know the best way?
The test file url is here - it downloads as the mime type isn't setup correctly on the server and I cant restart it at the moment :(. There are embedded images and fonts in the file, Which is why it's big. But if you save it to disk you can open in chrome, ff, etc...
An enlarged example of this problem is given. Notice the square edges on the orange glow.
The filter canvas has default values : x=y=-10% and width=height=120%. You can change them with the x, y, width and height attributes on the filter element.
Try to set a bigger canvas :
<filter x="-50%" y="-50%" width="200%" height="200%"/>
Yet, since the canvas is bigger, there will be performance loss.
I have one or more path elements inside a g element that I am scaling to fit inside a grid rectangle. The transform is applied to the g element. My transform works in that all the points end up at the right places, but I discovered that I have to adjust the stroke-width of the path to get a readable line.
The problem is that if the scale involves a large shift in the aspect ratio, I end up with some segments of the path being heavier weight than others, depending on their orientation.
Here is a typical transform that my code computed:
scale(0.1875, -0.010397820616798718) translate(-1149000, -96174)
In this case I end up changing the stroke-width from 9px to about 48px. Segments close to the horizontal end up thin, those close to the vertical are thick.
Is there any easy way to end with all the segments with the same rendered width?
Have you looked at setting the vector-effect attribute to non-scaling-stroke?
<line vector-effect="non-scaling-stroke" stroke="black" stroke-width="5"
x1="32" y1="50" x2="32" y2="350"/>
http://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
UPDATE
The best solution I can think of is to manually transform the coordinates of your path.
vector-effect="non-scaling-vector" is not consistently supported. My versions of Firefox and Safari do not support it, but my Chrome browser does.
In the SVG standard there is no way of specifying a transformation for the stroke independantly. (A stroke-transform attribute would be nice - like the windows GDI+ drawing system, where a Pen object has it's own local transformation).
Until this changes, the best solution I can think of is to manually work out the coordinates of your path - that is the svg has no transform elements; the coordinates are already transformed.