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