*responsive* SVG graphic with paint fill - svg

Is it possible to create a scalable SVG graphic like this ?
Scalable SVG graphic
I want it to resize according to the device dimensions. I'm trying to create a background image which'll use the full page dimensions - not fixed layout.
This is what I've come up with so far.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>New Design</title>
<style type="text/css">
html, body, div, span
{
margin:0;
padding:0;
border:0;
vertical-align: baseline;
}
body
{
font-family:'Roboto', Arial, Helvetica, sans-serif;
font-size:13px;
background-color:lightyellow;
}
html
{
height:100%;
}
body
{
min-height:100%;
position:relative;
}
#container
{
margin:0 auto;
background-color:#eceff1;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
path {
fill: blue;
}​
</style>
</head>
<body>
<div id="container">
<div style="width:calc(100% - 100px);height:calc(100% - 100px);margin:0 auto;padding:10px;border:1px solid red;">
<svg height="100%" width="100%" style="border:1px solid #5A07BC;background-color:#fff">
<line x1="20%" y1="0" x2="50%" y2="200" style="stroke:#5A07BC;stroke-width:1" />
<line x1="50%" y1="200" x2="0" y2="450" style="stroke:#5A07BC;stroke-width:1" />
<line x1="100%" y1="20%" x2="60%" y2="60%" style="stroke:#2AA4C6;stroke-width:1" />
<line x1="60%" y1="60%" x2="95%" y2="100%" style="stroke:#2AA4C6;stroke-width:1" />
</div>
</div>
</body>
</html>


You're not required to have every element in your SVG be in percentages. SVG graphics are scalable by default, but you need to include a viewBox attribute that describes its coordinate system.
The viewBox attribute takes four values — viewBox="x_min y_min width height" — which describe the extent of the drawing inside the SVG. You'll usually have something like viewBox='0 0 800 600' which means I have drawn things on a canvas of 800x600 "pixels", with the origin at x = 0, y = 0.
Then when you set a particular width and height to a SVG, it will, by default, stretch the image to fit these dimensions, but you can control the behavior with the preserveAspectRatio attribute.
Further reading: There's a good article on CSS Tricks about these two properties.

Related

Hover transform not removed when mouse leaves svg element, Safari only

I have a minimal piece of code that should result in a rectangle being transformed when hovering over it. It works fine on Chrome and Edge but Safari leaves the rectangle in its transformed state when the mouse has left it.
<html>
<head>
<style>
#rect:hover{
transform: scale(0.9);
}
</style>
</head>
<body>
<div id="divRect">
<svg width="400" height="110">
<rect id="rect" width="300" height="100" style="fill:rgb(0,0,255)" />
</svg>
</div>
</body>
</html>

Can workaround by adding initial transform like this-
<style>
#rect{
transform: scale(1);
}
#rect:hover{
transform: scale(0.9);
}
</style>

SVG Hover Doesn´t Work changing the colour of the arrow icon when put the mouse over the Video

When i put the video and then an SVG Icon. The Hover not working:
** The icon is over the video **
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nombre Stand</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/agency.min.css" rel="stylesheet">
<style>
svg{
display: inline-block;
max-height: 80px ;
stroke: #000;
stroke-width: 1px;
fill: none;
width: 500px;
margin: 0 auto;
background-repeat:no-repeat;
width:10%;
height:10%;
position:absolute;
left:75%;
right:0%;
top:55%;
bottom:0%;
margin:auto;
background-size:contain;
background-position: center;
}
svg:hover #izq {
fill: #DA4567;
}
</style>
</head>
<body>
<a href="#" target="_blank">
<svg version="1.1" id="Capa_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">
<g>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M32.337,33.807c-1.199-2.181-2.847-3.623-4.188-5.305
c-2.059-2.582-4.243-5.062-6.429-7.534c-0.688-0.779-0.153-1.097,0.28-1.612c3.306-3.923,6.586-7.87,9.88-11.802
c0.228-0.271,0.608-0.499,0.476-0.892c-0.18-0.533-0.696-0.267-1.069-0.338c-0.057-0.011-0.12,0.008-0.175-0.004
c-3.144-0.702-5.203,0.831-7.066,3.272c-2.575,3.376-5.369,6.578-8.127,9.802c-0.585,0.684-0.667,1.042-0.04,1.771
c3.341,3.887,6.613,7.838,9.914,11.762c0.386,0.458,0.795,0.885,1.46,0.881C28.873,33.801,30.491,33.807,32.337,33.807z"/>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M21.628,33.815c-2.317-2.749-4.283-5.09-6.26-7.421
c-1.563-1.841-3.121-3.687-4.722-5.493c-0.627-0.707-0.091-1.017,0.292-1.473c3.341-3.967,6.666-7.948,10-11.921
c0.224-0.267,0.603-0.477,0.45-0.891c-0.162-0.437-0.596-0.281-0.92-0.286c-1.23-0.019-2.467,0.064-3.691-0.027
c-1.119-0.083-1.522,0.829-2.054,1.452c-3.248,3.811-6.403,7.705-9.667,11.5c-0.681,0.792-0.822,1.169-0.064,2.028
c3.272,3.712,6.494,7.474,9.623,11.314c0.682,0.836,1.291,1.267,2.322,1.229C18.329,33.777,19.724,33.815,21.628,33.815z"/>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
</a>
<div id="video1">
<video id="myVideoder" width="100%" height="100%">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
</div>
<!--<body background="img/Stand.png" id="fondo"> -->
<!-- Header
<header>
</header>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Contact form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
</body>
</html>
**The SVG Icon: The code is simplified . The Id called "izq" **
<a href="#" target="_blank">
<svg ........
<path **id="izq"** d="M32.337,33............
}</a>
The SVG .CSS
svg{
display: inline-block;
max-height: 80px ;
stroke: #000;
stroke-width: 1px;
fill: none;
width: 500px;
margin: 0 auto;
background-repeat:no-repeat;
position:absolute;
margin:auto;
background-size:contain;
background-position: center;
}
This is the .CSS Hover Code
svg:hover #izq {
fill: #DA4567;
position:absolute;
display: inline-block;
background-size:contain;
}
I add the video Example:
OVER THE IMAGE - ITS OK!!: https://www.youtube.com/watch?v=4PHMMrr23Qw
OVER THE VIDEO - THE OVER DOESNT WORK: https://www.youtube.com/watch?v=NzmcER9q2j8
share edit delete flag

The <video> element is after the <svg> in your HTML. If you don't change the order somehow, it will capture the mouse events. Either:
Reorder the elements in the file so that the <a> is after the <video> (see below), or
Specify that the SVG should be on top by giving it a z-index > 0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Nombre Stand</title>
<style>
svg {
display: inline-block;
max-height: 80px ;
stroke: #000;
stroke-width: 1px;
fill: none;
width: 500px;
margin: 0 auto;
width:10%;
height:10%;
position:absolute;
left:75%;
right:0%;
top:55%;
bottom:0%;
margin:auto;
}
svg:hover #izq {
fill: #DA4567;
}
</style>
</head>
<body>
<div id="video1">
<video id="myVideoder" width="100%" height="100%">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4" type="video/mp4">
</video>
</div>
<a href="#" target="_blank">
<svg version="1.1" id="Capa_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">
<g>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M32.337,33.807c-1.199-2.181-2.847-3.623-4.188-5.305
c-2.059-2.582-4.243-5.062-6.429-7.534c-0.688-0.779-0.153-1.097,0.28-1.612c3.306-3.923,6.586-7.87,9.88-11.802
c0.228-0.271,0.608-0.499,0.476-0.892c-0.18-0.533-0.696-0.267-1.069-0.338c-0.057-0.011-0.12,0.008-0.175-0.004
c-3.144-0.702-5.203,0.831-7.066,3.272c-2.575,3.376-5.369,6.578-8.127,9.802c-0.585,0.684-0.667,1.042-0.04,1.771
c3.341,3.887,6.613,7.838,9.914,11.762c0.386,0.458,0.795,0.885,1.46,0.881C28.873,33.801,30.491,33.807,32.337,33.807z"/>
<path id="izq" fill-rule="evenodd" clip-rule="evenodd" fill="#F5BA1D" d="M21.628,33.815c-2.317-2.749-4.283-5.09-6.26-7.421
c-1.563-1.841-3.121-3.687-4.722-5.493c-0.627-0.707-0.091-1.017,0.292-1.473c3.341-3.967,6.666-7.948,10-11.921
c0.224-0.267,0.603-0.477,0.45-0.891c-0.162-0.437-0.596-0.281-0.92-0.286c-1.23-0.019-2.467,0.064-3.691-0.027
c-1.119-0.083-1.522,0.829-2.054,1.452c-3.248,3.811-6.403,7.705-9.667,11.5c-0.681,0.792-0.822,1.169-0.064,2.028
c3.272,3.712,6.494,7.474,9.623,11.314c0.682,0.836,1.291,1.267,2.322,1.229C18.329,33.777,19.724,33.815,21.628,33.815z"/>
</g>
</svg>
</a>
</body>
</html>

Why is SVG width 0 if container is display flex?

When I run the following code in a browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg {
border:1px solid green;
width:200px !important;
height:200px;
}
#container {
position:fixed;
top:300px;
left:800px;
width:1px;
height:1px;
overflow:visible;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-content:center;
}
</style>
</head>
<body>
<div id="container">
<svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>
All I get is a 2 pixel vertical line in the browser. It seems the width of my SVG is 0 (not including the green borders). When I delete the css rule display:flex, then my SVG circle appears. I tried to force my SVG to have a width: 200px !important; but this rule doesn't seem to take effect.
Why is my SVG not respecting the 200px rule when I use display:flex on the container?

I believe your SVG node is not displaying as you expect because it has a default position of static. If you change the SVG node to be absolute you'll get the desired behavior.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
svg {
position: absolute;
border: 1px solid green;
width: 200px;
height: 200px;
}
#container {
position: fixed;
/* changed these for ease of viewing */
top: 30px;
left: 150px;
width: 1px;
height: 1px;
overflow: visible;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="container">
<svg class="e3" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50"/>
</svg>
</div>
</body>
</html>

How to make SVG break aspect ratio

I have and SVG and I need to fulfil the browser windows. It´s an with sag assigned to src attribute. No mather I do, always keep aspect ratio. I even force image width and height via CSS but I can´t make it work.
The url: https://dl.dropboxusercontent.com/u/814218/svg/svg_test.html
Any suggestion?

Finally, I find the solution by recommendation of #SVG IRC Mozilla Group. The related info is here: http://codepen.io/jonitrythall/blog/preserveaspectratio-in-svg
I need to use, viewBox and preserveAspectRatio attributes. That´s the solution.
Here the final sample SVG source code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<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 1282 802" preserveAspectRatio="defer none"
xml:space="preserve">
<polygon opacity="0.2" fill="#FF00FF" stroke="#93278F" stroke-miterlimit="10" points="-1.5,0 -1.5,800 638.5,400 "/>
<polygon opacity="0.2" fill="#009245" points="0,801 1280,801 640,401 "/>
<polygon opacity="0.2" fill="#FFFF00" stroke="#FFFF00" stroke-miterlimit="10" points="638.5,400 1278.5,800 1278.5,0 "/>
</svg>

Try using:
.autoHeight{
width: 100%;
height: 100%;
}
#bg img {
max-width: 100%;
width: 100%;
height: 100%;
}
And your html should looks like:
<body cz-shortcut-listen="true">
<div id="bg" class="autoHeight" style="width: 100%; height: 100%;">
<img class="autoHeight" src="triangles.svg" alt="" style="width: 100%; height: 100%;">
</div>
</body>
But, basically, you need use: for both, width and height: 100%

Do you mean you need something like this?
<html>
<head>
<style>
html, body, img#svg { width: 100%; height: 100%; border: 0; margin: 0; padding:0 }
</style>
</head>
<body>
<img id="svg" src="https://dl.dropboxusercontent.com/u/814218/svg/triangles.svg" />
</body>
</html>

Show scrollbars if SVG elements overflows their container

I have an embedded SVG with dynamic content inside, which may grow in all directions.
This content may be grow bigger than the fix sized container around.
My expected behavoir is, to show scrollbars, if any element inside the SVG needs more place than the container provides.
See the following simplified example:
<html>
<head>
</head>
<body>
<div style="overflow: auto; position: absolute; top: 60px; left: 60px; background-color: gray; height: 200px; width: 300px;">
<svg style="height: 190px;">
<rect x="-50" y="0" width="100" height="50" fill="red"></rect>
</svg>
</div>
</body>
</html>
What is the way to do this?
Is it really true, there is no concept in SVG to support such behavoir?
Any suggestions how to do it right "by hand"?

Svg does'nt support auto resizing to inside elements of itself.
So, you should resize manually the svg graphic to be able to scroll by outer svg element.
var svg = document.querySelector("svg");
var bbox = svg.getBBox();
svg.setAttribute("viewBox", [bbox.x, bbox.y, bbox.width, bbox.height]);
svg.width.baseVal.valueAsString = bbox.width;
svg.height.baseVal.valueAsString = bbox.height;

Resources