I'd like stretch an image into a SVG but it seems not working as expected.
I used the preserveAspectRatio for the SVG but it doesn't work and the image get a padding left and right.
My code :
<svg class="mapSvg" preserveAspectRatio="none" width="1292px" height="649px" viewBox="0 0 1292 649">
<image xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>
<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">
</svg>
Main issue : my image do not fill the SVG.
Move preserveAspectRatio="none" to the image tag.
<svg class="mapSvg" width="1292px" height="649px" viewBox="0 0 1292 649">
<image preserveAspectRatio="none" xlink:href="https://images.sftcdn.net/images/t_app-cover-l,f_auto/p/befbcde0-9b36-11e6-95b9-00163ed833e7/260663710/the-test-fun-for-friends-screenshot.jpg" height="100%" width="100%" x="0" y="0"></image>
<polyline fill="red" stroke="black" points="461.909521484375,221.9047607421875 471.43330078125,220.9523681640625 475.24287109375,212.38095703125 472.385693359375,167.61904296875 477.147607421875,153.3333251953125 462.8619140625,153.3333251953125 460.95712890625,219.047607421875 461.909521484375,221.9047607421875" data-id="0">
</svg>
Related
https://jsfiddle.net/4n7j5a1t/
I'm using a svg shape divider but how I can change the background color to a background image in the fill CSS property ?
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
This is what I have tried so far but it does not keep the svg shape in place (wave):
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="imgpattern" x="0" y="0" width="1" height="1">
<image width="120" height="250"
xlink:href="https://example.com/slider-bg.png"/>
</pattern>
</defs>
<path d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill" fill="url(#imgpattern)"></path>
</svg>
Thanks.
EDIT
You have to define the image and then add it as a fill.
You can read more about this here
I'm not sure if this is what you wanted but I hope it helps. If not try to explain a little more and I might be able to help you.
Cheers!
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450">
<image xlink:href="https://image.api.playstation.com/vulcan/img/rnd/202011/0714/vuF88yWPSnDfmFJVTyNJpVwW.png" x="0" y="0"
width="600" height="450" /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
</pattern>
</defs>
<path fill="url(#img1")" d="M600,112.77C268.63,112.77,0,65.52,0,7.23V120H1200V7.23C1200,65.52,931.37,112.77,600,112.77Z" class="shape-fill"></path>
</svg>
I'm trying to use edit this example and fill the wave with a pattern
<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<pattern id="img4" patternUnits="userSpaceOnUse" width="180" height="180">
<image xlink:href="./pattern/menu-3.png" x="0" y="0" width="180" height="180" />
</pattern>
</defs>
<path class="shape-overlays__path"></path>
<path class="shape-overlays__path"></path>
<path class="shape-overlays__path"></path>
<path class="shape-overlays__path"></path>
</svg>
CSS
.shape-overlays__path:nth-of-type(4) {
fill: url(#img4);
stroke: red;
stroke-width: 1;
}
the SVG path is filled with pattern image but isn't repeated and is also stretched
I would like to have it repeated as a pattern, if is not possible I would like to use a big image as cover but keeping proportion
to solve the issue I changed preserveAspectRatio to "xMidYMid slice" instead of "none"
<svg id="shape-overlays" class="shape-overlays" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" >
I try to draw a svg in my HTML Code to have a specific path/object with an background image.
The object should be a little bit responsive (using bootstrap), but filled with the image and the image should preseve its ratio.
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
You can see it here in the live demo:
https://liveweave.com/N5nib6
https://jsfiddle.net/zyyvd86g/
Maybe anybody can help? I hope the problem is clear enough.
You can use max-width:100% for the svg element and div element wrap on this svg.
You can get the responsive image
div {
width: 80%;
height: auto;
margin: 0 auto;
}
svg {
max-width: 100%;
height: auto;
}
<div>
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="none" >
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="images/headerBackground.png" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
</div>
IMO opinion, the simple solution to your problem is to use a different preserveAspectRatio on your SVG.
Using preserveAspectRatio="none" is going to stretch your SVG and cause problems.
I'm assuming you want to keep the shape of the "swoop" on the bottom of your path. Correct?
If that is the case, you might prefer to use
preserveAspectRatio="xMidYMax slice"
instead. This scales the SVG up to fill the full width of the SVG viewport, whilst keeping the aspect ratio the same, and keeping the bottom of the SVG viewBox on screen.
<svg width="100%" height="370px" viewBox="0 0 1148.942 598.47" preserveAspectRatio="xMidYMax slice">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="1153" height="680">
<image xlink:href="http://lorempixel.com/1153/680/" x="0" y="0" width="1153" height="680" />
</pattern>
</defs>
<path fill="url(#img1)" d="M1145.237,3.395H3.379v592c0,0,247.108-160.416,1141-99L1145.237,3.395z"/>
</svg>
Trying to create a mask for an image using SVG. The mask is created out of a rounded corners rect, and a tip at the upper right corner.
I'm creating the entire thing just in SVG, but the I can't properly clip the tip of the mask. It seems as if you can't use an embedded SVG inside the clip-path element? Is that true? Whats the proper way to implement this than?
The image gets clipped only by the rectangle.
Here is my code -
<svg width="100%" height="210">
<defs>
<clipPath id="mask">
<rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
<svg viewBox="0 0 33.5 18" width="44px" y="-93" x="calc(100% - 62px)">
<path fill="black" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
</svg>
</clipPath>
</defs>
<image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
x="0"
y="0"
width="100%"
preserveAspectRatio="none"
clip-path="url(#mask)"/>
</svg>
And a link to the codepen - http://codepen.io/itayd/pen/VpXLZW
The solution was to define the path element in the defs, and use a element inside the clipPath.
<svg width="100%" height="210">
<defs>
<path transform="translate(50%, 50%)" cx="100" d="M23.5,10c0-5.5,4.5-10,10-10L0,0l0,18h23.5L23.5,10z"/>
<path id="tip" fill="green" d="M37.5,24.4C37.5,11,48.5,0,62,0H0v34h37.5V24.4z"/>
<clipPath id="mask">
<rect rx="20" ry="20" width="calc(100% - 31px)" height="210" style="fill:red;"/>
<use xlink:href="#tip" x="calc(100% - 68px)"/>
</clipPath>
</defs>
<image xlink:href="http://cdn.images.express.co.uk/img/dynamic/galleries/x701/58176.jpg"
x="0"
y="0"
width="100%"
preserveAspectRatio="none"
clip-path="url(#mask)"/>
</svg>
I want to hide the clipPath element so it doesn't show empty white space in the browser, but I still want to be able to use it from other svgs, like the image.
If I put width 0 and height 0 on it then IE won't show the image either.
If I put display:none the image doesn't show up in any browser.
<svg height="0" width="0" viewBox="0 0 400 400">
<defs>
<clipPath id="svgPath">
<circle fill="#FFFFFF" cx="50%" cy="50%" r="200" />
</clipPath>
</defs>
</svg>
<svg width="400" height="400" viewBox="0 0 400 400">
<image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" />
</svg>
Any ideas?
Put it in the same SVG as the image and there's nothing to hide.
<svg width="400" height="400" viewBox="0 0 400 400">
<defs>
<clipPath id="svgPath">
<circle fill="#FFFFFF" cx="50%" cy="50%" r="200" />
</clipPath>
</defs>
<image xlink:href="https://farm2.staticflickr.com/1530/25831337243_d27d32ceb5_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMinYMin slice" clip-path="url(#svgPath)" />
</svg>