Center SVG Object on responsive canvas - 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.

Related

Mask Image with SVG Shape and add a Border

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>

SVG odd (random) colors

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>

SVGs in menu getting cut off/cropped incorrectly

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!

Adding ease-in and ease out in SVG hover stroke-width

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;
}

Animated Snap SVG - s.group is not a function

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).

Resources