I create an image inside a svg but want to round it and fill the shape (small circle).
I already did image round in html image tag using css style but not know how i can do it in side a svg or apply same css style in svg. Here is a code:
<HTML>
<HEAD>
<style>
.pic-circle-corner {
display: block;
width: 25px;
height: 25px;
/* margin: .8em auto; */
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px ; /* solid #eee*/
box-shadow: 0 3px 2px rgba(0, 0, 0, 0.3);
}
</style>
</HEAD>
<BODY>
<div> picture should fill inside round shape..
<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" enable- background="new 0 0 40 40" xml:space="preserve">
<filter id="this_image" x="0%" y="0%" width="100%" height="100%">
<feImage width="28px" height="28px" xlink:href="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg"/>
</filter>
<circle cx="46" cy="42" r="40" stroke="black" stroke-width="3" filter="url(#this_image)" />
<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>
<div style="padding-top:50px;">
<image class="pic-circle-corner" src="http://pic.1fotonin.com/data/wallpapers/1/WDF_499177.jpg">
</div>
</BODY>
</HTML>
Can someone tell me a correct way.
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
Related
Is there a way to stop this outline in firefox?
#blob { background: red; width: 500px; height: 500px; clip-path: url(#myClip); transform: rotate(20deg);}
<div id="blob"></div>
<svg>
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1"></path>
<clipPath id="myClip"><use href="#path-1"></use></clipPath>
</defs>
</svg>
This renders correctly in other browsers, just need some work around for this firefox bug
same outline appears using either clip-path or mask
As a workaround you could rotate the clipPath instead:
#blob {
background: red;
width: 500px;
height: 500px;
clip-path: url(#myClip);
}
<div id="blob"></div>
<svg viewBox="0 0 397 409">
<defs>
<path d="M320.403196,424.677624 C426.787532,365.585154 447.310044,306.188587 433.45394,197.28033 C419.597836,88.3720737 316.997962,53.8862578 227.347416,40.9086547 C144.650118,28.9375873 104.472702,88.6407456 69.862267,131.812053 C15.52584,199.588564 48.3439099,300.905451 80.8563197,361.757908 C110.80391,417.809872 214.018859,483.770094 320.403196,424.677624 Z" id="path-1" />
<clipPath id="myClip" transform="rotate(20)" transform-origin="center">
<use href="#path-1"></use>
</clipPath>
</defs>
</svg>
Not sure this is possible, so I have a back-up plan (use a background image and :after to mask one of 3x transarent PNGs with the border in the image and use nth-child to change them).
Here's what I'm trying to accomplish. I know clip-path will give me the image mask, but I need the curved edges and the border color, too. Which I don't think is possible in pure CSS.
<!DOCTYPE html>
<html>
<style>
img {
max-width: 100%;
display: block;
}
.container {
width: 300px;
height: 300px;
margin: 1em auto;
}
.frame-border {
stroke: #10c020;
stroke-width: 4;
}
</style>
<body>
<div class="container">
<svg viewBox="-10 -10 120 120">
<defs>
<mask id="mask">
<rect fill="#000000" x="0" y="0" width="300" height="300"></rect>
<path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" fill="#FFFFFF"/>
</mask>
</defs>
<image mask="url(#mask)"
xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="https://randomuser.me/api/portraits/women/47.jpg" width="100" height="100">
</image>
<g class="frame-border" fill="none">
<path id="Path_611" data-name="Path 611" d="M1,38a12.225,12.225,0,0,1,2.558-3.025L41.351,13.462A21.12,21.12,0,0,1,46.733,12.4a14.319,14.319,0,0,1,4.81.765L89.2,34.814A7.333,7.333,0,0,1,92,37a7.273,7.273,0,0,1,1,3.4v45.3A6.741,6.741,0,0,1,92,89a12.9,12.9,0,0,1-3.015,2.945L50.42,110.628a8.953,8.953,0,0,1-3.688.786,13.383,13.383,0,0,1-4.153-.992L4.2,92.012A12.105,12.105,0,0,1,1,89a7.112,7.112,0,0,1-1-3.581V41.534A9.569,9.569,0,0,1,1,38Z" transform="translate(1.502 -10.892)" stroke-linecap="round" />
</g>
</svg>
</div>
</body>
</html>
I want to do a clippath with this svg but not working...
https://sendeyo.com/show/a1bd93cc13
I want my clippath to fill the image.
.apropos__img{
width:30vw;
height:30vw;
object-fit: cover;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
float:right;
}
<img src="https://picsum.photos/600/600" class="apropos__img">
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path class="st0" d="M187.3,78.7c0,49.8-57.1,121.3-104,121.3S0,128.6,0,78.7C0,28.7,36.4,0,83.3,0S187.3,28.7,187.3,78.7z"/>
</clipPath>
</defs>
</svg>
Thanks!
I am using .SVG files instead of .PNG for a small website I am building and I am encountering an issue with colors.
Whenever I add or remove an .SVG file to my code, all the the other .SVG file (logos) change colors and can't figure out why.
Here is an example of an SVG file :
<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"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
.st0{fill:#27346A;}
.st1{fill:#2790C3;}
.st2{fill:#1F264F;}
</style>
<g>
<path class="st0" d="M408.5,38.6C384.8,11.6,341.9,0,287.1,0H128c-11.2,0-20.7,8.2-22.5,19.2L39.2,439.4
c-1.3,8.3,5.1,15.8,13.5,15.8H151l24.7-156.5l-0.8,4.9c1.8-11.1,11.2-19.2,22.4-19.2H244c91.7,0,163.5-37.2,184.5-145
c0.6-3.2,1.2-6.3,1.6-9.3c-2.6-1.4-2.6-1.4,0,0C436.3,90.3,430,63.2,408.5,38.6"/>
<path class="st0" d="M213.2,115.7c2.6-1.2,5.5-1.9,8.6-1.9h124.7c14.8,0,28.6,1,41.1,3c3.6,0.6,7.1,1.2,10.5,2
c3.4,0.8,6.7,1.6,9.9,2.5c1.6,0.5,3.2,0.9,4.7,1.5c6.2,2.1,12,4.5,17.2,7.3c6.2-39.8,0-66.9-21.6-91.5C384.8,11.6,341.9,0,287.1,0
H128c-11.2,0-20.7,8.2-22.5,19.2L39.2,439.4c-1.3,8.3,5.1,15.8,13.5,15.8H151l51.2-324.6C203.2,123.9,207.5,118.5,213.2,115.7z"/>
<path class="st1" d="M428.4,139.4c-21,107.7-92.8,145-184.5,145h-46.7c-11.2,0-20.7,8.2-22.4,19.2l-30.7,194.6
c-1.1,7.3,4.5,13.8,11.8,13.8h82.8c9.8,0,18.1-7.1,19.7-16.8l0.8-4.2l15.6-98.9l1-5.5c1.5-9.7,9.9-16.8,19.7-16.8h12.4
c80.2,0,143-32.6,161.4-126.8c7.7-39.4,3.7-72.3-16.6-95.4c-6.1-7-13.8-12.8-22.7-17.5C429.6,133.1,429.1,136.2,428.4,139.4z"/>
<path class="st2" d="M408.1,121.3c-3.2-0.9-6.5-1.8-9.9-2.5c-3.4-0.8-6.9-1.4-10.5-2c-12.6-2-26.4-3-41.2-3H221.8
c-3.1,0-6,0.7-8.6,2c-5.8,2.8-10,8.2-11.1,14.9l-26.5,168.1l-0.8,4.9c1.7-11.1,11.2-19.2,22.4-19.2H244
c91.7,0,163.5-37.2,184.5-145c0.6-3.2,1.1-6.3,1.6-9.3c-5.3-2.8-11.1-5.2-17.2-7.3C411.3,122.3,409.7,121.8,408.1,121.3"/>
</g>
</svg>
I attached a codepen portion of the code : https://codepen.io/testingsonmcd/pen/NWRLdgJ
If you remove the last svg file, the first 2 logos will display with the desired colors.
The <style> inside your svgs aren't scoped, meaning their rules will affect the whole document.
Since several of these rules affect the same property of the same selector, they'll conflict with each other.
Simplification of OP's problem:
<svg viewBox="0 0 50 50" width="50" height="50">
<style>
rect { fill: red; }
</style>
<rect width="50" height="50"/>
</svg>
<svg viewBox="0 0 50 50" width="50" height="50">
<style>
rect { fill: green; }
</style>
<rect width="50" height="50"/>
</svg>
<svg viewBox="0 0 50 50" width="50" height="50">
<style>
rect { fill: blue; }
</style>
<rect width="50" height="50"/>
</svg>
Simply choose better selectors for your CSS, for instance you could add a unique class name to each of the root <svg> and append that in front of each selector:
<svg class="svg-1" viewBox="0 0 50 50" width="50" height="50">
<style>
.svg-1 rect { fill: red; }
</style>
<rect width="50" height="50"/>
</svg>
<svg class="svg-2" viewBox="0 0 50 50" width="50" height="50">
<style>
.svg-2 rect { fill: green; }
</style>
<rect width="50" height="50"/>
</svg>
<svg class="svg-3" viewBox="0 0 50 50" width="50" height="50">
<style>
.svg-3 rect { fill: blue; }
</style>
<rect width="50" height="50"/>
</svg>
I would like to achieve the following using an inline SVG:
My rocket shape has been drawn like so:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="icon">
<path id="icon" d="M11.933 13.069c0 0 7.059-5.094 6.276-10.924-0.017-0.127-0.059-0.213-0.112-0.268-0.054-0.055-0.137-0.098-0.263-0.115-5.697-0.801-10.674 6.422-10.674 6.422-4.318-0.517-4.004 0.344-5.974 5.076-0.377 0.902 0.234 1.213 0.904 0.959 0.67-0.252 2.148-0.811 2.148-0.811l2.59 2.648c0 0-0.546 1.514-0.793 2.199s0.055 1.311 0.938 0.926c4.624-2.016 5.466-1.694 4.96-6.112zM12.942 7.153c-0.598-0.613-0.598-1.604 0-2.217 0.598-0.611 1.567-0.611 2.166 0s0.598 1.603 0 2.217c-0.599 0.611-1.569 0.611-2.166 0z"></path>
</svg>
What's the best way to place my path within a filled circle as illustrated in the above image?
This can be achieved with good old CSS.
.icon {
display: inline-block;
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: #fff;
background-color: #4c8dcb;
border-radius: 24px;
padding: 8px;
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" class="icon">
<path id="icon" d="M11.933 13.069c0 0 7.059-5.094 6.276-10.924-0.017-0.127-0.059-0.213-0.112-0.268-0.054-0.055-0.137-0.098-0.263-0.115-5.697-0.801-10.674 6.422-10.674 6.422-4.318-0.517-4.004 0.344-5.974 5.076-0.377 0.902 0.234 1.213 0.904 0.959 0.67-0.252 2.148-0.811 2.148-0.811l2.59 2.648c0 0-0.546 1.514-0.793 2.199s0.055 1.311 0.938 0.926c4.624-2.016 5.466-1.694 4.96-6.112zM12.942 7.153c-0.598-0.613-0.598-1.604 0-2.217 0.598-0.611 1.567-0.611 2.166 0s0.598 1.603 0 2.217c-0.599 0.611-1.569 0.611-2.166 0z"></path>
</svg>