Say I have a row of 3 icons, each 20px x 20px, then some links (however wide the link text is) then another couple of links. I'm using flexbox to space the elements and what I would like to happen is that the space between is evenly distributed between the elements. What actually happens is that the svg will increase its size to take up the entirity of the free space.
I have tried taking out the height and width attributes from the svg but the image disappears altogether. I haver also tried a wrapper div but the svg forces it to take up the remainder of the space.
In case anyone finds this post, svg does not have any intrinsic width or height so by removing the width and height attribute from the svg something higher up in the chain needs to have an explicit width or height, then the svg will fill that space.
Related
I have my my FabricJS canvas inside a container with a fixed height/width in pixels. On the side I have a dropdown to change the canvas size to various presets. What I would like to do is automatically zoom out whenever I select a size that is either taller and/or wider than the container. So for example, if my container div is 800x600 and I select a canvas size of 1024x768, I want to zoom out so that the entire canvas is still visible. Conversely, I'd like to zoom in up to 100% if I select a smaller size (e.g. 200x200).
I found this example of zooming, but no matter how much you zoom out, the canvas size appears to stay the same. See screenshot:
How can I accomplish this?
As you can see here, the area with the thin red border is the canvas container. The white box is the canvas.
You can use the canvas.setDimensions function to accomplish this. You pass two arguments to it; the first is an object specifying the height and width to change the canvas to and the second indicates whether to change the css, the actual size of the canvas, or both.
For example,canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true} will set the actual size of the canvas to be 750x750, regardless of the display.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true}) will set the display size of the canvas to be 750x750, regardless of the actual size.
I'm not 100% sure whether the width or height require a px after it for css or for backstore, but that's a pretty simple thing to check. Also, if no argument is passed for the second parameter, it will change both.
I'm using several libraries to generate SVG images in-browser, which can be bounced off the server through svgexport to generate PNGs or JPEGs at user-specified resolutions. (This works as expected.)
I'd like to offer the user the option of downloading the SVG that gets fed into the conversion, with the resolution used to set the width and height attributes. When I do that, the viewbox is not scaled to the specified width and height, but is padded so that the image occupies the original size area in the upper left.
While looking for solutions, I found images in the W3C documentation that illustrate the problem. If you open these images in Chrome and use the inspector to change the width and height properties,
ViewBox.svg will expand to fill the width and height (linked from here)
PreserveAspectRatio.svg will be padded to stay in the upper left (linked from here)
This does not appear related the presence or value of thepreserveAspectRatio property, or the nesting of svg tags. My files are rendered as padded rather than scaled in Chrome/Chromium, Firefox, Safari/WebKit, Opera, Inkscape, and Gapplin.
How do I ensure that my SVG is scaled rather than padded to fill the width and height?
The viewbox is not scaled when it's entered as viewbox rather than viewBox; svg attribute names are case sensitive.
The second link does not have a viewBox attribute, and adding a viewbox (lowercase) attribute has no effect.
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.
Slowly losing my sanity... I've tried every search term I can think of, but can't find anything about what would seem to be exceedingly simple.
All I want is for the size, aka viewport, of my SVG to fit the containing elements.
I specifically don't want it to scale, crop, meet, slice, zoom or anything else. I just want it to behave like a default div.
The SVG will then be placed inside a div with a max-height and overflow:auto. When the SVG expands beyond the max-height of the containing div I will be able to scroll the div to see the whole of the SVG.
I have added CSS box-shadow to <img> in a blog post. The imgs have max-width:100% set so that they fill the column when it is resized.
The shadow spills out into margins due to box-shadow rendering outside of border in the CSS box model. I want to give the images some extra margin so that the shadow sits inside of the column. However if I use margin this will make the imgs wider than the column.
Is there a nice way to make the shadow sit inside without affecting the width as above?
Thought of wrapping in another element but it's a shame to do that.
If I had used solid borders I could have used box-sizing:border-box; to achieve this but it doesn't have any bearing on box-shadow?
How about max-width 98% or alightly lower and then the shadow should be just inside?