I'm using SVG elements with masks to "knock out" or "punch out" text so that the underlying image can be shown through. The only problem with my current set up is that when the browser window is resized, the image elements stretch and distort, rather than staying at a fixed aspect ratio/size.
I've been pouring over the svg spec and have read about preserveAspectRatio but nothing seems to work.
Here's the basic element I'm using:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<mask id="masktext1">
<rect width="100%" height="100%" fill="#fff" />
<text width="100%" class="svgtext">TEXT 1</text>
</mask>
</defs>
<image xlink:href="https://s3.amazonaws.com/f.cl.ly/items/1w3F3d130t2q1i2n2b2Y/pattern.png" mask="url(#masktext1)" width="100%" height="100%" x="0" y="0" preserveAspectRatio="xMinYMin slice" />
</svg>
Here's a JS Fiddle example. Note that the issue is visible when you resize the window horizontally.
http://jsfiddle.net/785yjwws/
The solution was found by reading up on viewBox as suggested by chipChocolate.py. I found this great article by on sarasoueidan.com which helped immensely. The end solution involved setting the width and height of the image element to be the full size of the background image, setting the width and height of the parent svg element programmatically for the space, and then setting viewBox = "0 0 [programmatic width] [programmatic height]" which frames the content.
Related
I don't know how to get rid of the scrollbars on my codepen example could someone please have a look at my SVG and CSS and see if you can remove the scrollbars without disrupting the image that's been generated. I need the image to fit without the scrollbars somehow there is overlapping I think
codepen
<svg viewBox="0 0 500 800" width="100%">
<defs>
<pattern id="hexagons" width="100%" height="100%" >
<g id="svg" fill="black" x="0" y="0"></g>
</pattern>
<mask id="hexagon-halftone-mask" x="0" y="0" width="100%" height="100%" >
<rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
</mask>
</defs>
<image width="100%" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/>
</svg>
If I understand correctly you want to get rid of the scrollbars but you also need the image to fit.
For the 1st part you just gotta add :
overflow: hidden;
to your body CSS. This will hide the scrollbars but wont prevent your svg to have a bigger height than the window and overflow.
So, for that you want to add :
svg {
max-height : 100%;
width: 100%;
}
(I put the width there instead of in the HTML code because it makes more sense to me but you can also leave it there and just add the max-height)
Edit : max-height is optional depending on the size/ratio of the picture in your project. It does mean that after a point your image could be smaller than width of the screen. But without it, in your current codepen the image would grow higher than the height of the frame.
Edit 2 : codepen link with adjustable hexagon sizes, min size and spacing.
I've almost finished my background but it's not working properly, I'm trying to get the image to fit the viewbox dimensions. I need my image to responsive and to act like background-size:cover. I also need to have the scrollbars gone and I don't know why its there. Can someone help me get my image to fit the entire viewbox area and be responsive - I need it to be 100% width and 100% height and the image covered
codepen
<svg viewBox="0 0 490 500" width="100%" height="100%">
<defs>
<pattern id="hexagons" width="100%" height="100%">
<g id="svg" fill="black" x="0" y="0"></g>
</pattern>
<mask id="hexagon-halftone-mask">
<rect x="0" y="0" width="100%" height="100%" fill="url(#hexagons)" />
</mask>
</defs>
<image id="svg-bg" xlink:href="https://cdn.pixabay.com/photo/2016/09/07/11/37/tropical-1651426_960_720.jpg" mask="url(#hexagon-halftone-mask)"/>
</svg>
I'm trying to obtain the same percent of the filled container with an SVG when resizing container.
as you can see when I resize the container of my SVG, it doesn't update, the width of SVG remains the same, not 80% of the container.
<svg width="80%" height="100%" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100% 100%">
<defs>
<clipPath id="progress-clipping-mask">
<rect width="100%" height="100%"/>
</clipPath>
</defs>
</svg>
Is there a way to remain 80% of the container even if it changes its width?
I am trying to render an image inside a circle with svg. This works on chrome, but not other browsers, what am I doing wrong?
I have included several possible ways of specifying the link to the image, href= is what works with chrome. I can't get any of these to work elsewhere. If I change the fill to #000 it fills with black - so the problem is in the pattern.
<svg width="488.20001220703125" height="469.183349609375" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<pattern id="circleimage" x="135.99766906738282" y="126.2336688232422" patternUnits="userSpaceOnUse" height="206.440673828125"
width="206.440673828125">
<image x="0" y="0" href="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xmlns:xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"
xlink="https://res.cloudinary.com/hrltiizbo/image/upload/c_scale,h_207/v1456513725/capitol_crowd_wrong_way_andwo1.jpg"></image>
</pattern>
</defs>
<circle cx="239.21800598144532" cy="229.4540057373047" r="103.2203369140625" fill="url(#circleimage)"></circle>
</svg>
You need to specify the height and width of your image.
I've been really trying to learn some SVG. But browsers seem to get in a right old muddle rendering it.
Take the following HTML:
<html>
<head></head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
<rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>
<p>Hello? Hellooooooooooooo?</p>
</body>
</html>
View this is any modern browser and you'll see an arbitrary amount of whitespace between the rectangle and the following HTML paragraph. (IE9 doesn't display anything but noone will be surprised about that.)
Firefox (Firebug) doesn't give the heights of either the svg or the rect elements. It just wimps out and says 'auto'.
Opera says the svg has a height of 150px and says 'auto' for the rect.
Chrome mans up and gives heights for both. 102px for the rect (obviously including the stroke) and 428px for the svg.
My expectation is that the svg element would be a 'thin' container (i.e. add nothing to the dimensions of its contents) and therefore have a height of 102px.
Anyone know what the correct behaviour should be and how I might go about fixing this?
You've not explicitly defined what the width or height of the SVG is, or where the rectangle is placed, or even what part of the SVG is of interest. It's hardly surprising browsers are dealing with things differently.
Try defining a width and height:
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" width="102px" height="102px">
<rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>
Alternatively, define a viewBox:
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 102 102">
<rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>
Or both:
<svg xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 52 52" width="102px" height="102px">
<rect height="100" width="100" style="stroke:#006600; fill: #00cc00"/>
</svg>
Here are some examples in action.