SVG image inside circle
A pattern will work. You just have to give the <image> a size. Unlike HTML, SVG images default to width and height of zero.
Also, if you want the image to scale with the circle, then you should specify a viewBox for the pattern.
<svg id="graph" width="100%" height="400px">
<!-- pattern --> <defs> <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 512 512"> <image x="0%" y="0%" width="512" height="512" xlink:href="https://cdn3.iconfinder.com/data/icons/people-professions/512/Baby-512.png"></image> </pattern> </defs> <circle id="sd" class="medium" cx="5%" cy="40%" r="5%" fill="url(#image)" stroke="lightblue" stroke-width="0.5%" /></svg>How can I display an image inside SVG circle in html5?
Here is an example elaborating on Havenard's comment above:
<svg width="500" height="250">
<defs>
<clipPath id="circleView">
<circle cx="250" cy="125" r="125" fill="#FFFFFF" />
</clipPath>
</defs>
<image
width="500"
height="250"
xlink:href="https://www.amrita.edu/sites/default/files/news-images/new/news-events/images/l-nov/grass.jpg"
clip-path="url(#circleView)"
/>
</svg>How do you draw a svg icon inside a circle element?
You don't put the path inside the circle tag. You need to set the coordinates ofevery shape. In this case I would put the ctoss inside a symbol element with a viewBox and use it with <use>. This will allow me to give the use a position (x,y) and a width and a height. In the nest example I'm giving the use a width and height of 100 vut you can choose another value:
<svg viewBox="-150 -150 300 300" >
<circle fill="blue" class="in-circle" r="110"></circle>
<use href="#sym" width="100" height="100" x="-50" y="-50" />
<symbol id="sym" viewBox="6.9 8 26.5 26.5" fill="red">
<path id="kk" d="m33.5 29.5q0 0.9-0.7 1.5l-3 3.1q-0.6 0.6-1.5 0.6t-1.5-0.6l-6.6-6.6-6.5 6.6q-0.7 0.6-1.6 0.6t-1.5-0.6l-3-3.1q-0.6-0.6-0.6-1.5t0.6-1.5l6.5-6.6-6.5-6.5q-0.6-0.7-0.6-1.6t0.6-1.5l3-3q0.6-0.6 1.5-0.6t1.6 0.6l6.5 6.6 6.6-6.6q0.6-0.6 1.5-0.6t1.5 0.6l3.1 3q0.6 0.7 0.6 1.5t-0.6 1.6l-6.6 6.5 6.6 6.6q0.6 0.6 0.6 1.5z"></path>
</symbol>
</svg>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>
Use svg icon inside a css circle
There are 2 problems:
You are not setting a border radius on the red rectangle, that's why you keep seeing rectangles instead of circles.
Also, to be a circle the rectangle needs to be square before adding the border radius, which it won't be when you are using flex and setting a fixed height. If it is not square, you will get ovals instead of circles.
Therefore you will need to add another container for the red circle and place it inside the flex container. As your image has a fixed height & width, you can set a fixed height and width on this container too to make it square.
You need to remove the border-radius: 50%; from your flex container (i.e. treatment-method__icon__container) and use something like this for the new outer class:
.treatment-method__icon__outer_circle {
background-color: red;
/* Set the height & width to be the same, so the container is square */
width: 80px;
height: 80px;
/* Add the border radius to round the corners */
border-radius: 50%;
/* Add padding around the image if required */
padding: 10px;
}
The new container is 100 x 100px square as I assume you wanted an outer "border" of space around the image, but you can remove the padding if you want it exactly the same size as the image.
I have added a working example below:
.treatment-methods__icons {
display: flex;
flex-wrap: wrap;
}
.treatment-method__icon__container {
flex: 1 0 21%;
margin: 5px;
height: 100px;
}
.treatment-method__icon__outer_circle {
background-color: red;
border-radius: 50%;
width: 80px;
height: 80px;
padding: 10px;
}
.treatment-methods_icon {
vertical-align: middle;
width: 80px;
height: 80px;
border-radius: 50%;
color: #ffffff;
}<section class="treatment-methods">
<div class="treatment-methods__icons">
<div class="treatment-method__icon__container">
<div class="treatment-method__icon__outer_circle">
<img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
</div>
</div>
<div class="treatment-method__icon__container">
<div class="treatment-method__icon__outer_circle">
<img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
</div>
</div>
<div class="treatment-method__icon__container">
<div class="treatment-method__icon__outer_circle">
<img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
</div>
</div>
<div class="treatment-method__icon__container">
<div class="treatment-method__icon__outer_circle">
<img src="https://www.svgrepo.com/show/80293/online.svg" alt="wellness" class="treatment-methods_icon">
</div>
</div>
</div>
</section>How to create a clickable circle of svg images
Why not using an SVG as a wrapper? You can use the <image> to embed the images and <a> to link to somewhere.
At this point (with all the small SVG images already made) the only problem is to put them back together in the right size and position. Maybe you could go one step back in the process and have a look at the source files and see if the sizing/positioning can be solved there.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<a href="#1">
<image href="https://svgur.com/i/gUR.svg" width="40" x="30"/>
</a>
<a href="#2">
<image href="https://svgur.com/i/gUQ.svg" width="38" x="58" y="5" />
</a>
<a href="#3">
<image href="https://svgur.com/i/gTa.svg" width="33" x="64" y="38" />
</a>
<svg>Displaying an image within a circle svg
Solved, its the pattern tag that needs the ID, not the image tag:
<svg width="100" height="100">
<defs>
<pattern id="image-JON" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="27.3" y="27.3" height="45.3515625" width="45.3515625" xlink:href="https://keithmcnulty.github.io/game-of-thrones-network/img/jon.png">
</image>
</pattern>
</defs>
<circle cx="50" cy="50" r="20.408203125" fill="url(#image-JON)">
</circle>
</svg>
How to round image inside svg
these are some options:
1) absolute position - place the SVG path inside a container and place an absolute positioned circled div with a background image on top of the path.
HTML/SVG:
<div class="container">
<div class="circle-div"> </div>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="40px" height="40px" viewBox="0 0 40 40">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
</div>
CSS:
.container {
position: relative;
}
.circle-div {
border-radius: 50%;
background-image: url('http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg');
width: 25px;
height: 25px;
background-size: cover;
background-position: 25% 25%;
position: absolute;
left: 7.5px;
top: 2.5px;
}
2) SVG clipPath - place an SVG image on top the SVG path and clip it with a circle.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
<defs>
<clipPath patternUnits="userSpaceOnUse" id="clip">
<circle cx="50%" cy="40%" r="13" ></circle>
</clipPath>
</defs>
<image preserveAspectRatio="xMidYMid slice" clip-path="url(#clip)" x="5" y="2" width="100%" height="65%" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"></image>
<path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
3) SVG pattern - place an SVG circle on top the SVG path and fill it with a pattern that is the image itself.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40px" height="40px" viewBox="0 0 40 40">
<defs>
<pattern id="pf" x="0" y="0" height="100%" width="100%"
viewBox="0 0 960 420" preserveAspectRatio="xMinYMid slice">
<image x="-150" y="11" width="960" height="420" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg" ></image>
</pattern>
</defs>
<circle cx="50%" cy="40%" r="13" fill="url(#pf)"></circle>
<path stroke-width="1px" stroke="#026890" fill-rule="evenodd" clip-rule="evenodd" fill="#026890" d="M35.686,13.595c-0.172-1.381-0.541-2.705-1.085-3.979
c-0.517-1.208-1.19-2.327-1.995-3.37c-0.758-0.982-1.629-1.855-2.593-2.629c-1.124-0.901-2.359-1.633-3.688-2.197
c-1.44-0.613-2.941-1.011-4.497-1.179c-2.306-0.252-4.575-0.041-6.787,0.672c-1.006,0.324-1.975,0.741-2.896,1.261
c-1.782,1.007-3.32,2.295-4.606,3.889C6.355,7.53,5.472,9.165,4.893,10.956c-0.397,1.23-0.63,2.498-0.694,3.793
c-0.057,1.153-0.017,2.301,0.175,3.438c0.158,0.944,0.415,1.866,0.749,2.767c0.369,0.994,0.842,1.938,1.434,2.815
c0.666,0.986,1.373,1.944,2.053,2.921c1.443,2.076,10.465,12.023,11.379,13.173c1.063-1.314,10.533-11.896,13.064-15.517
c0.96-1.372,1.713-2.839,2.175-4.453c0.242-0.849,0.427-1.708,0.52-2.586C35.875,16.068,35.84,14.832,35.686,13.595z M20,28.318
c-7.041,0-12.75-5.709-12.75-12.751S12.958,2.817,20,2.817c7.042,0,12.75,5.708,12.75,12.75S27.042,28.318,20,28.318z"/>
</svg>
I think the easiest solution in this case is to go with CSS, as it requires less position-tweaking to get proper results.
demo
Dashes doesn't start full at the beginning in circle svg
In this example I use a mask to create the stroke-dasharray. The dasharray is calculated based on the max-score (total). There is always a gap of 5 units between dashes (out of a total/pathLength of 1000).
The mask is then applied to two circles. The gray circle is always a full circle and the length of the DarkTurquoise circle depends on the score.
Both circles are rotated -90 deg, so that the score 0 is at 12 o click.
const c1 = document.getElementById('c1');
const c2 = document.getElementById('c2');
const t1 = document.getElementById('t1');
const update = (total, score) => {
c1.setAttribute('stroke-dasharray', `${(1000-total*5)/total} 5`);
c2.setAttribute('stroke-dasharray', `${1000/total*score} 1000`);
t1.textContent = `${score}/${total}`;
};
document.forms.form01.total.addEventListener('change', e => {
let total = parseInt(e.target.value);
let score = parseInt(e.target.form.score.value);
e.target.form.score.setAttribute('max', total);
if (score >= total) score = total;
update(total, score);
});
document.forms.form01.score.addEventListener('change', e => {
let total = parseInt(e.target.form.total.value);
let score = parseInt(e.target.value);
update(total, score);
});body {
display: flex;
}
form {
display: flex;
flex-direction: column;
}<form name="form01">
<label>Total: <input name="total" type="range" min="5" max="30" value="10"/></label>
<label>Score: <input name="score" type="range" min="0" max="10" value="5"/></label>
</form>
<svg viewBox="0 0 100 100" width="250" xmlns="http://www.w3.org/2000/svg">
<defs>
<mask id="mask01">
<circle id="c1" cx="50" cy="50" r="40" fill="none" stroke="white" stroke-width="10" stroke-dasharray="95 5" pathLength="1000"/>
</mask>
</defs>
<g transform="rotate(-90 50 50)">
<circle mask="url(#mask01)" cx="50" cy="50" r="40" fill="none" stroke="Gainsboro" stroke-width="10" />
<circle id="c2" mask="url(#mask01)" cx="50" cy="50" r="40" fill="none" stroke="DarkTurquoise" stroke-width="10" stroke-dasharray="500 1000" pathLength="1000" />
</g>
<text id="t1" x="50" y="50" dominant-baseline="middle" text-anchor="middle" font-family="sans-serif" fill="DarkTurquoise">5/10</text>
</svg>Set background color to text inside circle element of svg
The simplest thing is just to add a circle as the first element and colour that. Everything else will then draw on top.
.circle {
fill: none;
stroke: green;
stroke-width:6px;
stroke-linecap: round;
}
.circle-bg {
fill: none;
stroke: grey;
stroke-width:6px;
}
.text-bg {
fill: tan;
}
.percentage {
fill: orange;
font-size: 8px;
font-family: sans-serif;
text-anchor: middle;
}<svg viewBox="-2 -2 40 40" class="circular-chart yellow" width="auto" height="auto">
<circle class="text-bg" cx="18" cy="18" r="15"/>
<path class="circle-bg" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"></path>
<path class="circle" stroke-dasharray="21, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831"></path>
<text x="18" y="20.35" class="percentage">93</text>
</svg>Related Topics
Semantically, Which Is More Correct: a in H2, or H2 in A
How to Fix "Insecure Content Was Loaded Over Https, But Requested an Insecure Resource"
How to Add a Highlight Behind The Text via CSS So It Looks Like Instagram-One Below
What Does The Question Mark at Then End of a CSS Include Url Do
How to Make Image Caption Width to Match Image Width
CSS Hide Scroll Bar If Not Needed
Make Tbody Scrollable in Webkit Browsers
How to Align Text Directly Beneath an Image
Centering an Image Within a Div
Fixed Header, Footer, and Sidebars with Scrolling Content Area in Center
Select First Occurring Element After Another Element
Getting Youtube.Com to Load in Iframe
Can Outlook 2010 Use a Web Font in an HTML Email
How to Show an Animation That Is Hidden Behind a Colored Div Using a "Reveal" Div on The Surface
Detecting Real Time Window Size Changes in Angular 4
How to Apply a CSS Gradient Over a Text, from a Transparent to an Opaque Colour