Is it possible to set a background-image for an SVG <path> element?
For instance, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall{background-image: url(wall.jpg)} does not, neither .wall {background-color: red;}.
You can do it by making the background into a pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
Adjust the width and height according to your image, then reference it from the path like this:
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
Working example
Related
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>
Is it possible to set a background-image for an SVG <path> element?
For instance, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall{background-image: url(wall.jpg)} does not, neither .wall {background-color: red;}.
You can do it by making the background into a pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
Adjust the width and height according to your image, then reference it from the path like this:
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
Working example
Is it possible to set a background-image for an SVG <path> element?
For instance, if I set the element class="wall", the CSS style .wall {fill: red;} works, but .wall{background-image: url(wall.jpg)} does not, neither .wall {background-color: red;}.
You can do it by making the background into a pattern:
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image href="wall.jpg" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
Adjust the width and height according to your image, then reference it from the path like this:
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
Working example