Fill SVG path element with a background-image
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
Using SVG as background image
With my solution you're able to get something similar:
Here is bulletproff solution:
Your html:<input class='calendarIcon'/>
Your SVG:
i used fa-calendar-alt
(any IDE may open svg image as shown below)
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/>
</svg>
To use it at css background-image you gotta encode the svg to address valid string. I used this tool (name: URL Decoder—Convert garbled address)
As far as you got all stuff you need, you're coming to css
.calendarIcon{
//your url will be something like this:
background-image: url("data:image/svg+xml,***<here place encoded svg>***");
background-repeat: no-repeat;
}
Note: these styling wont have any effect on encoded svg image
.{
fill: #f00; //neither this
background-color: #f00; //nor this
}
because all changes over the image must be applied directly to its svg code
<svg xmlns="" path="" fill="#f00"/></svg>
To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:
.calendarIcon{
background-image: url("data:image/svg+xml,%3Csvg...svg%3E");
background-repeat: no-repeat;
padding-right: calc(1.5em + 0.75rem);
background-position: center right calc(0.375em + 0.1875rem);
background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}
Add background image in SVG
Correct a syntax error in the path, you are missing a "
at the end and remove fill:none
from CSS that is overriding the fill attribute used with the path:
Full code:
path { stroke: #000; stroke-width: 3px; stroke-linejoin: round; stroke-linecap: round;}
<svg width="1000" height="700"> <!-- <rect fill="#fff" width="100%" height="100%"></rect> -->
<defs> <pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" width="1000" height="700"> <image xlink:href="https://lorempixel.com/600/450/" width="600" height="450" /> </pattern> </defs> <path d="M5,5 l0,680 l980,0 l0,-680 l-980,0" fill="url(#img1)" /></svg>
How to modify the fill color of an SVG image when being served as background image?
I needed something similar and wanted to stick with CSS. Here are LESS and SCSS mixins as well as plain CSS that can help you with this. Unfortunately, it's browser support is a bit lax. See below for details on browser support.
LESS mixin:
.element-color(@color) {
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="@{color}" ... /></g></svg>');
}
LESS usage:
.element-color(#fff);
SCSS mixin:
@mixin element-color($color) {
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="#{$color}" ... /></g></svg>');
}
SCSS usage:
@include element-color(#fff);
CSS:
// color: red
background-image: url('data:image/svg+xml;utf8,<svg ...><g stroke="red" ... /></g></svg>');
Here is more info on embedding the full SVG code into your CSS file. It also mentioned browser compatibility which is a bit too small for this to be a viable option.
Centered background image within SVG
Using a pattern fill is the way to go - if your image aspect ratio is square it will work nicely. Notice the patterns width and height are the same as your rectangle. It's important in this case to set the patternUnits
to userSpaceOnUse
which for simplicity keeps the pattern fill from scaling to the objects bounding box.
.body { width: 100%; height: 100%; background: #1f1b33; padding: 2rem;}
svg { width: 120px;}
<div class="body"> <svg viewBox="0 0 121.375 125.397"> <defs> <pattern id="patt" patternUnits="userSpaceOnUse" width="97" height="97"> <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/17496/flace.jpg" width="97" height="97"></image> </pattern> </defs> <g id="blank" transform="translate(-1460.94 -927.887)" > <path id="wrapper" data-name="Caminho 2257" d="M80.617,78.013C67.787,91.6,11.606,90.985-8.689,69.872s-20.527-73.915,0-90.659S66.834-47.3,87.13-26.188,93.447,64.424,80.617,78.013Z" transform="translate(1484.938 966.119)" fill="#fff" opacity="0.2" /> <rect id="within" data-name="Retângulo 365" width="97" height="97" rx="37" transform="translate(1475 945)" fill="url(#patt)" /> </g> </svg></div>
How to change ::before SVG background-image color on hover, focus, active
The problem is that you are using SVG's data URI as a background image, meaning that its properties and styles cannot be modified—the SVG markup is not part of the DOM and therefore untouchable with CSS. It is akin to referencing a .svg
image path in your background-image
property.
The only solution is—as you have suspected—to simply encode a brand new SVG for the hover state:
.field { width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; background-color: #849d8f;}
.field__search { width: 35px; height: 35px; background-color: rgba(255, 255, 255, 0.2); border-radius: 66px; position: relative;}
.field__search::before { content: ""; position: absolute; top: 8px; left: 8px; width: 22px; height: 22px; background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#fff' /></svg>"); background-repeat: no-repeat; background-position: 0 0; opacity: 1;}
.field__search:hover::before,.field__search:focus::before,.field__search:active::before { background-image: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='16.687' height='16.688' viewBox='0 0 16.687 16.688'><path class='cls-1' d='M931.155,40.747H930.4l-0.264-.261a6.212,6.212,0,1,0-.675.675l0.263,0.262v0.755l4.773,4.76,1.423-1.422Zm-5.731,0a4.291,4.291,0,1,1,4.3-4.291A4.294,4.294,0,0,1,925.424,40.747Z' transform='translate(-919.219 -30.25)' fill='#000' /></svg>");}
<div class="field"> <div class="field__search"></div></div>
Add a background image (.png) to a SVG circle shape
An image fill for an svg element is achieved through SVG Patterns...
<svg width="700" height="660">
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="url.png"></image>
</pattern>
</defs>
<circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>
SVG as background image inlined in style attribute
Use HTML escapes inside the attribute value: "
for a double quote, and (in this case not necessary, but if the need arises) '
for a single quote.
<div style="background-image: url('data:image/svg+xml;charset=utf8,<svg width="30" height="25" viewBox="0 0 30 25" fill="none" xmlns="http://www.w3.org/2000/svg" version="1.1"><path d="M3 14.0204L10.8806 21L27 3" stroke="%231CDFAF" stroke-width="5" stroke-linecap="round"/></svg>');"><br style="line-height:25px"></div>
Related Topics
How to Select The Last-Child of The Last-Child
Colors in Bootstrap Custom Download
Anyone Know What The Purpose of Tagging a Class with *[Class]
Color Change of Navigation Buttons When Scrolling Up and When Scrolling Down
How to Add Second Level to a Submenu in a Dropdown Navigation CSS
Website Will Not Scroll on Mobile Devices
Override and Reset CSS Style: Auto or None Don't Work
Overlay a Background-Image with an Rgba Color, with a CSS3 Transition
CSS3 Box Shadow Size - Percent Units
Styling a Hover Statement in Svg
Detect If Computer Can Support 3D Transforms Properly
Nested Div Elements Wrapping with Float Left
Remove The Bottom Margin of a Handsontable