Related
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 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>
The SVG canvas is configured to adjust to the browser window and always fill 100% horizontally and vertically.
I want the blue cube to always be in the bottom center of the window and also stay the same size.
Is there any way to change the position of the cube or the viewBox, so that the cube always stays in the bottom center no matter what size the browser window has?
Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
</style>
</head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/> <!--Background-->
<rect x="0" y="0" width="100" height="100" fill="blue"/> <!--Cube-->
</svg>
</body>
</html>
I would use javascript for this. The clientWidth and clientHeight will give you the size of the SVG canvas.Alternatively you may use the getBoundingClientRect()
let x,y;
function init(){
x = svg.clientWidth/2 - 50;
y = svg.clientHeight - 100;
therect.setAttributeNS(null,"x",x)
therect.setAttributeNS(null,"y",y)
}
setTimeout(function() {
init();
addEventListener('resize', init, false);
}, 15);
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
<svg id="svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/><!--Background-->
<rect id="therect" x="50%" y="100%" width="100" height="100" fill="blue"/><!--Cube-->
</svg>
You can move the viewbox origin to the center with viewbox="-50 -50 100 100",
and from there on draw all the elements taking into account the relative values set by viewbox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
</style>
</head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 100 100" >
<rect x="-50vw" y="-50vw" width="100vw" height="100vw" fill="lightgreen"/> <!--Background-->
<rect x="-25" y="0" width="50" height="50" fill="blue"/> <!--Cube-->
</svg>
</body>
</html>
PS:I don't how well vw units are supported as svg attributes values so you might want to test that.
What I try to do:
Using a <use> element to copy an icon, and color the icon in two different colors when a specific class is added to the <use> element.
The Icon:
<symbol xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
id="red5" x="0px" y="0px" viewBox="0 0 48.1 50.8">
<style type="text/css">
.st0{
fill:#D73647;
stroke:#000000;
stroke-miterlimit:10;
}
/* use.active .color-a{
fill: green;
}
use.active .color-b{
fill: blue;
}*/ // Not working...
</style>
<g>
<path class="st0 color-a" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
</path>
<path class="st0 color-b" d="M45.8,30.6L36.3,30.6C36.3,30.6 35.6,39.9 25.8,39.6C25.8,39.6 19.6,39.7 15.8,34.8L21.8,28.4L0.5,28.4L0.5,48.1L7.7,41.7C7.7,41.7 12,50.3 24.5,50.2C24.5,50.3 43.3,51 45.8,30.6z">
</path>
</g>
</symbol>
The Use Element:
<use id="svg_16"
xlink:href="#red5" transform="matrix(0.6730555893894703,0,0,0.7071457914654147,-239.09557391490307,-165.87702520953462) "
y="269.9999919533732"
x="473.99998587369964"
class="default-state"
fill="black"></use>
When the class of the <use> is changed from "default-state" to "active", I want the colors of the arrows to change (each to its own color).
What I've tried so far:
I understood that for the paths to change their color from the <use> element I have to change their CSS class to this:
.st0{
fill: inherit; // <- changed
stroke: #000000;
stroke-miterlimit: 10;
}
and the color classes to this:
use.active {
fill: green;
}
but then when I set the class of <use> to "active" they both get the same color...
I would like to do the same thing for animations.
What am I missing? How do I achive this?
This is how I would do it: I would create one symbol and I would reuse twice the same path: once as it is and once rotated 180 degs. For the "default" state please remove the active class of the g element.
.st0{
stroke-miterlimit:10;
}
.active .color-a{
fill: green;
}
.active .color-b{
fill: blue;
}
svg{width:90vh;border:1px solid}
<svg viewBox="0 0 140 150" >
<symbol id="a" viewBox="0 0 48.1 50.8">
<path class="st0 color-a" id="k" d="M2.3,20.2L11.8,20.2C11.8,20.2 12.5,10.9 22.3,11.2C22.3,11.2 28.5,11.1 32.3,16L26.3,22.4L47.5,22.4L47.5,2.7L40.4,9C40.4,9 36.1,0.4 23.6,0.5C23.6,0.5 4.8,-0.2 2.3,20.2z">
</path>
</symbol>
<g class="active" id="svg_16" >
<use class="color-a"
xlink:href="#a">
</use>
<use class="color-b" transform="rotate(180 70 75)"
xlink:href="#a"> </use>
</g>
</svg>
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