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
Fill SVG path element with a background image without tiling or scaling
Just make the x
, y
, width
and height
of the pattern match the bounding box of your path. You can just use "0","0","1" & "1" respectively here because the patternUnits
defaults to objectBoundingBox
, so the units are expressed relative to the bounding box. Then make the image in your pattern have the width
and height
of the path bounding box also. This time, you'll need to use "real" sizes though.
The image will be centred in the pattern automatically because the default value of preserveAspectRatio
for <image>
does exactly what you want.
<svg width="600" height="600"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="120" height="250" xlink:href="http://lorempixel.com/animals/120/250/"/> </pattern> </defs> <path fill="url(#imgpattern)" stroke="black" stroke-width="4" d="M 100,50 L 120,110 150,90 170,220 70,300 50,250 50,200 70,100 50,70 Z" />
</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.
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>
Change color/fill of a SVG path when used in the content of a ::before pseudo-element
You could use a mask.
div::before {
display: inline-block;
width: 18px;
height: 18px;
content: '';
background: var(--c);
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M350.85 129c25.97 4.67 47.27 18.67 63.92 42 14.65 20.67 24.64 46.67 29.96 78 4.67 28.67 4.32 57.33-1 86-7.99 47.33-23.97 87-47.94 119-28.64 38.67-64.59 58-107.87 58-10.66 0-22.3-3.33-34.96-10-8.66-5.33-18.31-8-28.97-8s-20.3 2.67-28.97 8c-12.66 6.67-24.3 10-34.96 10-43.28 0-79.23-19.33-107.87-58-23.97-32-39.95-71.67-47.94-119-5.32-28.67-5.67-57.33-1-86 5.32-31.33 15.31-57.33 29.96-78 16.65-23.33 37.95-37.33 63.92-42 15.98-2.67 37.95-.33 65.92 7 23.97 6.67 44.28 14.67 60.93 24 16.65-9.33 36.96-17.33 60.93-24 27.98-7.33 49.96-9.67 65.94-7zm-54.94-41c-9.32 8.67-21.65 15-36.96 19-10.66 3.33-22.3 5-34.96 5l-14.98-1c-1.33-9.33-1.33-20 0-32 2.67-24 10.32-42.33 22.97-55 9.32-8.67 21.65-15 36.96-19 10.66-3.33 22.3-5 34.96-5l14.98 1 1 15c0 12.67-1.67 24.33-4.99 35-3.99 15.33-10.31 27.67-18.98 37z'/></svg>") center no-repeat;
}
<div style="--c:red;"></div>
<div style="--c:orange;"></div>
<div style="--c:yellow;"></div>
<div style="--c:green;"></div>
<div style="--c:blue;"></div>
<div style="--c:indigo;"></div>
<div style="--c:violet;"></div>
Related Topics
How to Make Space Between Two Buttons in Same Div
How to Properly Escape Quotes Inside HTML Attributes
How to Remove Hover Effect from Bootstrap Button
Simple Way to Display Data in a .Txt File on a Webpage
Setting Attribute Disabled on a Span Element Does Not Prevent Click Events
How Can the Parent Div Auto Resize Its Height Based on the Child'S Height
In Angular 4, How to Dynamically Set Min Date and Max Date in Date Picker
How to Avoid Decimal Values in Input Type Number
Show Placeholder Text for Input Type Date
How to Run a HTML File from Terminal
How to Pass Boolean Variable of False in a Url
How to Save User-Entered Line Breaks from a Textarea to a Database
How to Put CSS @Media Rules Inline
How to Prevent a User from Entering Negative Values in HTML Input