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>
After spending hours looking into similar issues I still haven't found a solution that works. I have some SVGs that are rendering fine normally, but when they're placed in the <nav> parts are cut off. I have noticed that the issue seems to occur only when multiple SVG icons are used in the nav. So if, for example, I remove the first <li> item in its entirety the remaining SVGs seem to not have the problem of being cut off.
I've set up a codepen here with the same code below: https://codepen.io/lsg-alex/pen/oNgVLbq
<nav id="site-navigation" class="main-navigation">
<div class="menu-main-container">
<ul id="menu-main">
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 12.1 18.1"
width="12.1"
height="18.1"
>
<defs>
<style>
.cls-1,
.cls-4 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
.cls-4 {
stroke: #58585b;
stroke-linecap: square;
stroke-linejoin: round;
stroke-width: 0.5px;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>
</defs>
<title>icon-archive</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
<path
class="cls-4"
d="M7.85,17.05H1.05v-14h10v10.8M9,1.15v1.1H4.24Zm.35-.9-8.71,2H.61a.42.42,0,0,0-.36.4v14.8a.41.41,0,0,0,.4.4H8.29a.31.31,0,0,0,.24-.12l3.25-3.25a.39.39,0,0,0,.07-.31V2.65a.41.41,0,0,0-.4-.4H9.83V.65A.43.43,0,0,0,9.38.25Z"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Archive</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.24 17.78"
width="16.24"
height="17.78"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path">
<rect class="cls-1" width="16.24" height="17.78"></rect>
</clipPath>
</defs>
<title>icon-topics</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M5.24,10.35,6.23,8a.42.42,0,0,1,.39-.26h3.72a.44.44,0,0,1,.43.43.36.36,0,0,1-.06.2l-1,2.36a.42.42,0,0,1-.39.26H5.61a.44.44,0,0,1-.43-.43.36.36,0,0,1,.06-.2M8,.56,5.63,6.23a.43.43,0,0,1-.39.26H.61a.62.62,0,0,0,0,1.23H4.36a.43.43,0,0,1,.42.43.35.35,0,0,1,0,.2l-1,2.36a.42.42,0,0,1-.4.26H.61a.62.62,0,0,0,0,1.23H2.46a.43.43,0,0,1,.43.43.46.46,0,0,1-.05.2L1.11,16.93a.62.62,0,0,0,1.14.48l2.09-4.94a.42.42,0,0,1,.39-.26H8.44a.43.43,0,0,1,.43.43.46.46,0,0,1,0,.2L7.16,16.77a.62.62,0,0,0,1.15.46l2-4.76a.42.42,0,0,1,.39-.26h4.92a.6.6,0,0,0,.43-.18.61.61,0,0,0-.43-1h-4a.43.43,0,0,1-.42-.43.35.35,0,0,1,.05-.2l1-2.36a.42.42,0,0,1,.4-.26h3a.62.62,0,0,0,0-1.23H13.49a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2l2.11-5A.62.62,0,0,0,14.08.38L11.61,6.23a.42.42,0,0,1-.39.26H7.51a.43.43,0,0,1-.43-.43.46.46,0,0,1,0-.2L9.18,1A.62.62,0,0,0,8,.56"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Topics</span></a
>
</li>
<li>
<a href="#"
><!--?xml version="1.0" encoding="UTF-8"?-->
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 16.72 16.14"
width="16.72"
height="16.14"
>
<defs>
<style>
.cls-1 {
fill: none;
}
.cls-2 {
clip-path: url(#clip-path);
}
.cls-3 {
fill: #58585b;
}
</style>
<clipPath id="clip-path" transform="translate(0 0)">
<rect class="cls-1" width="16.72" height="16.14"></rect>
</clipPath>
</defs>
<title>icon-search</title>
<g id="Layer_2" data-name="Layer 2">
<g id="Layer_1-2" data-name="Layer 1">
<g class="cls-2">
<path
class="cls-3"
d="M9.84,11c-2.75-.13-4.75-2.1-4.65-4.57A4.6,4.6,0,0,1,10,2.06a4.58,4.58,0,0,1,4.52,4.63A4.57,4.57,0,0,1,9.84,11m-5.55-.57c-.86.81-3,3-3.86,3.81a1,1,0,0,0-.15,1.5,1.07,1.07,0,0,0,1.6,0c.87-.82,3.05-3.08,3.89-3.89,4.1,2.38,7.81,1,9.71-1.56a6.37,6.37,0,0,0-.8-8.44,7,7,0,0,0-9.06-.47,6.43,6.43,0,0,0-1.33,9"
transform="translate(0 0)"
></path>
</g>
</g>
</g>
</svg>
<span class="menu-item__text">Search</span></a
>
</li>
</ul>
</div>
</nav>
I tried adjusting the viewBox settings, height/width on the SVGs themselves as well as through CSS, setting overflow to visible, using a .svg inside an tag, etc. but none of these seem to have any impact. When I pull one of the SVGs that's cut off outside of the nav and paste the code above it, for example, it renders properly.
I can't help but feel like there's something obvious here I'm overlooking, and any help would be really appreciated.
This line is your culprit, remove them (or at least this first one since it's the one effecting the ones below it) and voila;
<clipPath id="clip-path">
<rect class="cls-1" width="12.1" height="18.1"></rect>
</clipPath>
Then to keep it clean, remove the references to it in the CSS such as;
clip-path: url(#clip-path);
I'm going to assume these were generated with something and you didn't intend on needing a specified clip-path anyway.
Cheers!
I want to add ease-in-out over hover efect in svg map. I am creating the hover by stroke-width of the path. Is this possible at all?
Any other suggesting for creating such hovers in svg maps with easing are welcome. Thank you!
Link to Codepen
<!DOCTYPE html>
<html>
<head xmlns="http://www.w3.org/1999/xlink">
<meta charset="UTF-8">
<title>SVG Hover</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200 200">
<g id="layer1" transform="translate(-277.14 -332.36)">
<rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
<circle id="path4138" cx="380" cy="430" r="15"
onmouseover="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 50; this.style['stroke-opacity'] = 0.7;"
onmouseout="this.style.stroke = '#3f27dd'; this.style['stroke-width'] = 0;"/>
</g>
</body>
</html>
I don't know how to do it with JavaScript but I was able to do it with CSS. EDIT: I know but CSS looks cleaner.
JSfiddle
Here is my code:
<body>
<svg xmlns="http://www.w3.org/2000/svg" height="56mm" width="56mm" version="1.1" viewBox="0 0 200 200">
<g id="layer1" transform="translate(-277.14 -332.36)">
<rect id="rect3336" height="200" width="200" y="332.36" x="277.14" fill="#cecece"/>
<circle id="path4138" cx="380" cy="430" r="15"
/>
</g>
And CSS:
#path4138 {
transition: stroke-width 0.3s ease-in;
stroke: #3f27dd;
stroke-width: 0;
stroke-opacity: 0.7;
fill: pink;
pointer-events:all;
}
#path4138:hover {
stroke-width: 50;
fill: red;
transition: stroke-width 0.3s ease-out;
}
For some reason when I try to make a group using snap.svg I get:
Uncaught TypeError: s.group is not a function
No mater what I try I cannot get it to work! It's as if Snap.SVG isn't working at all but my Snap("#wrapper"); works fine?
My Code is below:
index.js
s = Snap("#wrapper");
var text = s.selectAll("#text");
var text3group = s.group(text);
HTML:
<html>
<head>
<meta charset="UTF-8">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
#Layer_2{fill:#FFF}
.st2{font-size:40px;font-family: "proxima-nova",sans-serif;}
.bold{
font-weight:900;
}
</style>
<g id="text">
<text id="XMLID_2_" transform="matrix(1 0 0 1 47 177.0039)">
<tspan x="-20" y="0" class="st1 st2 bold">90%</tspan>
<tspan x="74" y="0" class="st3 st2"> of the data in the world today has </tspan>
<tspan x="15" y="50" class="st3 st2">been created in </tspan>
<tspan x="305" y="50" class="st4 st2 bold">the last two years</tspan>
<tspan x="640" y="50" class="st3 st2">.</tspan>
</text>
</g>
</svg>
</div>
<script src="js/index.js"></script>
</body>
</html>
Main problem is likely that Snap needs an SVG element, not a DIV element (unlike Raphael where you can give it a DIV). Try moving the id 'wrapper' to the SVG (or give it a different name and use that).