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>
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.
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.
Does anyone have any tip/knowledge on changing the color/properties of a svgicon without using CSS or directly modifying the file?
For example:
const style = {
somestyle: {
random style configs
}
}
<svgIcon className={somestyle} />
Is it even possible to change that svgIcon into a different color from it's default color without using CSS or directly modifying the file?
Or maybe it would be easier to use and modify svgs provided by matieral-ui?
You can use javascript to modify the style of the respective SVG elements.
<html>
<head>
<script>
function setColor(color)
{
document.getElementById("rect").style.fill = color;
}
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width: 300px; height: 250px">
<rect x="50" y="20" rx="10" ry="10" width="200" height="200" style="fill:red; stroke:black; stroke-width:3" id="rect" />
</svg>
<button onclick="setColor('red');">Red</button>
<button onclick="setColor('green');">Green</button>
<button onclick="setColor('blue');">Blue</button>
</body>
</html>
http://jsfiddle.net/VDzGG/
I am building an svg-based application which uses one, »root« svg as Viewport/Canvas. Within this one I load one SVG which sets up all the graphics, that one is quiet large (~18.000px * 800px, 4MB). I am trying to create a parallax effect, which is working for primitive graphic element like <rect>. But it does not work for <g> elements.
It is difficult to post relevant code, since the graphic has grown very big, so below you can see an example for the basic setup:
<svg class="root" width="1000" height="800">
<g class="container" transform="matrix(1,0,0,1,<dx>,<dy>)">
<svg width="16000" height="800">
<!-- a lot of graphics here -->
<g>
<!-- the group with all the graphics for the parallax -->
<g class="parallax" transform="matrix(<crazy inkscape values here>);">
</g>
</g>
<!-- a lot of graphics here -->
</svg>
</g>
</svg>
All in all I need to access the width of the whole group to calculate the parallax offset, therefore I am using:
<g>.getBBox();
what returns a value whose width is about 2.5 times too big. I replaced the group with a <Rect> in the same dimensions at the same place in the DOM and everything works alright.
What could cause the returned bounding bounding box grow, probably <gradient>-, <symbol>-, or <use>- elements ?
I appreciate any Idea.
btw: The conversion of coordinates is already taken into account here, at least as far a possible. I tested this in FF and Chromium — the same thing everywhere…
Thanks in ahead!
Edit
I guess I found the reason for the error. This time it wasn't mine. The Graphics were delivered by an Illustrator, using Illustrator and in the original file I found several empty path. They spanned the bbox to 0/0, even if no real point was there...
I don't think the following is the full solution, but let's start here for discussion purposes.
The following is an inline svg with a width=400 height=400, but contains a <g> element with some elements that exceed those sizes. I want to fit the elements in the <g> to my 400x400 inline svg.
Try this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='font-family:arial'>
<center>
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'>
<svg id="mySVG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" >
<g id="myG">
<circle cx=1000 cy=500 r=300 fill="red" />
<rect x=300 y=200 width=500 height=300 fill="blue" />
</g>
</svg>
</div>
<button onClick=fitG() >fit G</button>
<br />SVG Source:<br />
<textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea>
<br />Javascript:<br />
<textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea>
</center>
<div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF28<br /></div>
<script id=myScript>
//---button--
function fitG()
{
var bb=myG.getBBox()
var bbx=bb.x
var bby=bb.y
var bbw=bb.width
var bbh=bb.height
//---center of import---
var cx=bbx+.5*bbw
var cy=bby+.5*bbh
//---create scale: ratio of desired width vs current width--
var width=390
var scale=width/bbw
//---where to move it---
var targetX=200
var targetY=200
//---move its center to target x,y ---
var transX=(-cx)*scale + targetX
var transY=(-cy)*scale + targetY
myG.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")")
svgSourceValue.value=svgDiv.innerHTML
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
svgSourceValue.value=svgDiv.innerHTML
jsValue.value=myScript.text
}
</script>
</body>
</html>