I have the following code:
<svg width="100" height="100" viewBox="0 0 1920 1080">
<rect x=0 y=0 width=1920 height=1080 />
</svg>
Why does the rect cover the full width of its parent svg in units? but not the height?
Codesandbox here
Because of the dimensions you are using.
What you have is a rectangle inside a square:
<svg width="100" height="100" viewBox="0 0 1920 1080">
<rect x=0 y=0 width=1920 height=1080 />
</svg>
When what you should consider is changing your viewBox to being the same height/width ratio as the parent SVG (either all 1920 or all 1080)
<svg width="100" height="100" viewBox="0 0 1080 1080">
<rect x=0 y=0 width=1080 height=1080 />
</svg>
Alternatively, you could change the SVG dimensions
<svg width="192" height="108" viewBox="0 0 1920 1080">
<rect x=0 y=0 width=1920 height=1080 />
</svg>
Related
I have the following SVG image:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
<pattern id="i" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMinYMin slice"/>
</pattern>
<rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
</svg>
I need the rectangle to fill with an image equivalent to the following CSS syntax:
background-size:cover;
background-image:url("image.jpg");
background-repeat:no-repeat;
background-position:right top;
Thanks to this post, I got them all except background-position:right top. Is this possible in an SVG image? If so, how can I achieve this?
To mimic the behavior, so that the top right corner of the picture is located at the top right corner of the rect, you just need to change the preserveAspectRatio="xMinYMin slice" of the image to preserveAspectRatio="xMaxYMin slice":
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 66.667 108">
<pattern id="i" width="100%" height="100%">
<image xlink:href="https://upload.wikimedia.org/wikipedia/commons/3/38/Bangalore_Panorama_edit1.jpg" width="45" height="49" preserveAspectRatio="xMaxYMin slice"/>
</pattern>
<rect x="21.667" y="0" width="45" height="49" fill="url(#i)"/>
</svg>
I am trying to render a image where the bottom part is cut of stylishly. The image should scale and fill the container so it is always 100% wide, but remains 500px high.
The current state almost works, however I do not want the mask to scale on the y-axis as it does now. The mask should stay a fixed height and only scale on the x-axis. The effect right now is that the mask cuts of a way to big piece of the image in large formats.
<svg viewBox="0 0 100 50" preserveAspectRatio="xMinYMax slice" width="100%" height="500px">
<defs>
<mask id="clip">
<path d="M0,45 100,40 100,0 0,0Z" fill="white"></path>
</mask>
</defs>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://placeimg.com/1500/500/animals" mask="url(#clip)" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMidYMid slice"></image></svg>
You are not very explicit about how you want the mask to behave when the image gets wider.
Here's one solution. Is this what you wanted? The mask angles from full height on the left, to 90% height on the right. No matter how wide the image is.
<svg width="100%" height="500px">
<defs>
<mask id="clip" maskContentUnits="objectBoundingBox">
<path d="M0,1 1,0.9 1,0 0,0Z" fill="white"></path>
</mask>
</defs>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://placeimg.com/1500/500/animals"
width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMidYMid slice" mask="url(#clip)"></image>
</svg>
I have the following svg:
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none" style="display: block; position: absolute; top: 0;">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="-20" width="100" height="100"/>
</pattern>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" style="stroke-width:0" fill="url(#img1)"/>
</svg>
It's not working as expected because it enlarge te face of the people on the image as follows:
But it should look like this:
Does having a triangular polygon affects the image? How can I solve it, I need 4 triangle figures with images inside to be clickables.
Well this is working as intended. You specify a pattern whose unit should fill the bounding box of the container, and then specify a 2:1 container - so it stretches the image. There are lots of permutations that preserve the aspect ratio of the image - it depends on exactly what behavior you want.
This is one version that preserves the aspect ratio of the SVG itself even when it's asked to fill a larger space.
<svg height="100%" width="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" style="display: block; position: absolute; top: 0;">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" width="100%" height="100%">
<image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="-20" width="100" height="100"/>
</pattern>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" fill="url(#img1)" />
</svg>
Or if you want to adjust the pattern itself, you can double the height of the pattern and offset it in Y to adjust for the 2:1 ratio of your container:
<svg height="100%" width="100%" viewBox="0 0 100 100" style="display: block; position: absolute; top: 0;">
<defs>
<pattern id="img1" patternUnits="objectBoundingBox" y="-100%" width="100%" height="200%">
<image xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMax meet"/>
</pattern>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" fill="url(#img1)" />
</svg>
This is another version that uses a filter to fill in the image.
<svg height="100%" width="100%" viewBox="0 0 100 100" style="display: block; position: absolute; top: 0; background:grey">
<defs>
<filter id="img1" x="0%" y="0%" width="100%" height="100%" >
<feImage xlink:href="https://media.npr.org/assets/img/2016/06/22/gettyimages-467390112_custom-e8fa0c9a7224b7172555577fde25a08949bde2d2-s900-c85.jpg" x="0" y="0" width="100" height="100" preserveAspectRatio="xMidYMax meet"/>
<feComposite operator="in" in2="SourceGraphic"/>
</filter>
</defs>
<polygon points="0 100, 50,50 100,100" id="abajo" filter="url(#img1)" />
</svg>
DEMO
Objective: I am trying to create a triangle shaped proportion less image in HTML.
My Approach: I have decided to use SVG to achieve this by creating a polygon triangle that can stretch & shrink to fit any dimension and used it as a mask on image that is suppose to fit in any dimension without loosing its own proportion.
Issue: Although the shape is working as I want but the background image stretches with the shape, is there any way I can make the image behave to something similar like css background-size: cover property.
Code:
HTML
<div id="svg-container">
<svg width='100%' height='100%' viewBox="0 0 100 100" preserveAspectRatio="none" style='background-color: whitesmoke'>
<defs>
<polygon id="mask" points="0,0 0,100 0,100 100,0" />
<pattern id="image" patternUnits="userSpaceOnUse" width="100" height="100" x="0" y="0">
<image xlink:href="http://lorempixel.com/500/500" x="0" y="0" width="100%" height="100%" preserveAspectRatio="xMinYMin slice"/>
</pattern>
</defs>
<use xlink:href="#mask" fill="url(#image)"></use>
</svg>
</div>
CSS:
#svg-container {
width: 100%;
height: 100px;
}
To check same issue using SVG image tag here.
I am trying to create an SVG graph with a fixed width to the left for the x axis labels and then a variable width to fill the remaining space for the actual graph results. The image below shows what I am trying to achieve. Thus far I have been unable to work out how to create the fixed width and variable width area.
Any help with this would be much appreciated!
Many thanks.
I would nest a couple of SVG elements inside your main like so:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" >
<svg width="100">
<rect x="0" y="0" width="100%" height="100%" fill="red" />
</svg>
<svg x="100" >
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
</svg>
</svg>
NOTE I made the blue SVG element translucent so you can see that none of the red SVG was behind it.
I would also recommend using viewBox to give you more control over your drawing...
EDIT:
OK then I need to ask you a question about aspect ratios. If you take a square (width = height) and chop off a fixed portion from ONE side you no longer have a square and you have to think about what that means to your graph.
I believe this SVG will demonstrate more or less what you want:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="600px" height="500px" viewBox="0 0 1200 1000">
<svg width="200">
<rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>
<svg x="200" width="1000" height="1000" viewBox="0 0 100 100">
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
<rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
<rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>
NOTE the aspect ratio (AR) of the outermost SVG's dimensions MUST match the outermost viewBox's AR but can have different values. Likewise for the second inner SVG, but now you are dealing with a slice of the total that is a true square and not a rectangle. You can vary the width and height of the outer most SVG and so long as you maintain the same AR all the code on the inside will not have to change - it will all scale automajically :)
Also note the different scales in use and the different value types I used for co-ordinates. Because my second inner SVG's viewBox set the user co-ordinates to 100 X 100, 10% and 10 amount to the same thing...
You could also set the preserveAspectRatio="none" or some other value to achieve different effects but for a graph I kinda think lining things up is important so I wouldn't.
One final note - you could (and in your case should) omit the viewBox on the inner SVG. That way the scale is consistent on all parts of your graph. I was just showing off the power of viewBox :)
It just occurred to me that you may prefer a rectangle to a square so here is a code sample for that:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="800px" height="400px" viewBox="0 0 1600 800" >
<svg width="200">
<rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/>
</svg>
<svg x="200" width="1400" height="800" viewBox="0 0 175 100" >
<rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/>
<rect x="80%" y="10%" width="10%" height="50%" fill="green"/>
<rect x="10" y="10" width="70" height="40" fill="gray"/>
</svg>
NOTE the width of the inner SVG is set to 175 so that the aspect ratio of 1400/800 is maintained.