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/
Related
I pasted SVG code from illustrator and put inside a div.
The div has no height value. the height is set by the SVG
The Div show height with +2.67px
The SVG height is 30px like it should be but for some reason, there is an offset at the top you can see
the white thin line.
Why does it happen? is this a known issue?
Ok, so I tried and test and figure out it has something to do with display value.
when I changed the parent DIV to display:flex it was all the same height, sometimes the path still goes over the actual and tags but I guess it is because of the shape and pixel rendering
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.
I have tried many variants of the svg parameters, but have had no joy in scaling this particular SVG.
I am trying to contain this SVG into a container element that controls the size of the SVG.
I'm aiming for 500x309px.
What combination of width, height, viewBox and preserveAspectRatio can help me achieve this without having the SVG masked or cropped?
You absolutely must have a viewBox attribute on your SVG element that describes the bounding box of the contents you want to be always visible. (The file that you link to does not; you'll want to add one.)
To cause your SVG to fill an HTML element, put the CSS attribute position:relative (or position:absolute or position:fixed if appropriate) on your wrapper, and then
Set the CSS attribute position:absolute on your <svg> element to cause it to sit inside and fill your div. (If necessary, also apply left:0; top:0; width:100%; height:100%.)
Once you have a viewBox and your SVG sized correctly the default value of the preserveAspectRatio attribute will do what you want. In particular, the default of xMidYMid meet means that:
The aspect ratio described by your viewBox will be preserved when rendering.
By comparison, a value of none would allow non-uniform scaling.
The viewBox will always meet either top/bottom or left/right, with 'letterboxing' keeping the other dimension inside.
By comparison, a value of slice ensures that your viewBox fully fills the rendering, with either the top/bottom or left/right falling outside the SVG.
The viewBox will be kept vertically and horizontally centered within the SVG viewport.
By comparison, a value of xMinYMax would keep it in the bottom-left corner, with padding only to the right or top.
You can see this live here: http://jsfiddle.net/Jq3gy/2/
Try specifying explicit values for preserveAspectRatio on the <svg> element and press "Update" to see how they affect the rendering.
Edit: I've created a simplified version of the US Map with a viewBox (almost half the bytes) and used that in an updated demo to suit your exact needs: http://jsfiddle.net/Jq3gy/5/
Set the SVG width and height to be the size of its container, and set preserveAspectRatio = none.
<div height="50" width="100">
<svg preserveAspectRatio="none" viewBox="0 0 300 200"></svg>
</div>
and
$("svg").each(function(){
this.width = this.parentNode.width;
this.height = this.parentNode.height;
}
That's it. Setting CSS is not needed.
I personally set viewBox to be the size of the contents of the SVG. So in my example, the original image I am loading into my SVG is 300x200. It will shrink to fit a 50x100 div. But viewBox manipulation is a separate issue.
Unfortunately, I don't know the answer that applies to raw SVG, but in Raphael.js, I did it like that:
var paper = Raphael('#container', your_container_width, your_container_height);
paper.setViewBox(realSvgWidth, realSvgHeight, true);
This technique scaled my SVG to fit the bounds.
Hope this helps.
I want to make moveable world for my HTML game so I put 1600x1200 canvas inside my 800x600 div element and using left and top to move the world. I expected that div will clamp size of my canvas, but instead my canvas overlaps borders of my div. The div doesn't stretch, the canvas is scaled independently from the div.
I tried !important, max-width and max-height, different displays, nothing works. Using CSS for width and height just scales the canvas. I also tried putting my canvas into SVG as foreign object, but I get error "getContext is not a function".
So, how can I limit size of my canvas?
The div is going to expand to the size of your canvas unless the div has overflow: hidden; set in its CSS. The child element is larger than the parent element, and you haven't strictly told the browser to limit the sizing of the parent element.
The max-width and max-height attributes won't help you here because you aren't placing "wrappable" content within the div. If you put text in a div with max-width set, the value will be respected. If you put an element with an unchanging size, like an image or a canvas element, the browser can't dynamically wrap it like a bunch of floating divs or some text. In this case, you have overflow, which needs to be handled differently.
You can achieve what you're looking for by playing with the position and/or margin attributes for the canvas element once you set the parent div to hide the overflow.
I would like to place a canvas on top of an image that I have on a page. The canvas will be the exact dimensions of the image.
However, the following conditions must be met:
The canvas must remain exactly on top of the image at all times. Therefore, using absolute positioning will not work because if content is inserted above the image, it will move the image down without moving the canvas.
The image may be resized from its original size. Therefore, replacing the image with the canvas and setting its background to the image will not work.
What options do I have?
You should be able to use position:relative instead of absolute for your first requirement.
For the second I'm guessing you could put both the image and the canvas inside of a span. The canvas would have a width/height of 100% and would be resized as the image resizes because the size of the div would change to fit the image.
EDIT: actually I'm not sure position:relative would work. But I believe if you use position:absolute and the parent element has position:relative, than the absolute positions will be relative to the parent.