I was following this tutorial: https://www.youtube.com/watch?v=y0Ic8QcvyK8 and i decided i wanted to pause the animation with the click of a button. I have tried and tried and tried. Searched through w3schools, searched here, searched wherever google sent me too... maybe im just dumb and cant figure it out alone ....
This is the html im using
<!DOCTYPE html>
<html lang="en" onscroll="scroller()">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="layout.css">
<script type="text/javascript" src="myscripts.js"> </script>
<script type="text/javascript" src="svg.js"> </script>
</head>
<body>
<button id="b1" class="b3" onclick="change()"></button>
<div class="wrapper">
<svg id="tudo" 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 1350 620" style="enable-background:new 0 0 1350 620;" xml:space="preserve">
<style type="text/css">
</style>
<g>
<rect x="14.41" y="12.48" class="st0" width="1414.59" height="596.52"/>
<path id="p1" class="st1" d="M22.61,207.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C67,253.3,38.43,237.19,22.61,207.89z"/>
<path class="st1" d="M220.08,12.48h82.91c45.7,0,83.06,35.89,83.06,79.83c0,43.8-37.35,79.54-83.06,79.54h-35.45v76.76h-47.46
V12.48z M338.58,91.87c0-17.87-15.97-32.37-35.6-32.37h-35.45v65.33l35.45,0.15C322.61,125.13,338.58,110.18,338.58,91.87z"/>
<path class="st1" d="M402.45,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C457.67,253.15,402.45,198.08,402.45,130.84z M600.06,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C566.36,205.11,600.06,171.56,600.06,130.55z"/>
<path class="st1" d="M816.56,59.5h-58.01v189.11h-47.61V59.5h-58.15V12.48h163.77V59.5z"/>
<path class="st1" d="M920.86,130.84c0-67.82,55.22-123.19,122.75-123.19s122.9,55.37,122.9,123.19
c0,67.24-55.37,122.31-123.05,122.31C976.08,253.15,920.86,198.08,920.86,130.84z M1118.46,130.55c0-41.31-33.69-75-75-75
c-41.16,0-74.71,33.69-74.71,75c0,41.02,33.54,74.56,74.71,74.56C1084.77,205.11,1118.46,171.56,1118.46,130.55z"/>
<path class="st1" d="M1244.73,59.21v47.61h81.45v47.31h-81.45v94.78h-47.46V11.89h142.38v47.31H1244.73z"/>
<path class="st1" d="M197.81,536.98c0,34.86-25.05,71.63-73.68,71.63H34.92V372.48h64.45c41.89,0,68.55,30.76,68.55,62.55
c0,25.05-16.55,40.58-22.27,40.58C168.37,475.6,197.81,499.04,197.81,536.98z M82.23,418.62v46.14h19.19
c11.28,0,22.27-9.67,22.27-23.44c0-13.33-10.4-22.71-21.39-22.71H82.23z M151.52,533.61c0-13.62-9.38-27.25-31.93-27.25H82.23
v55.96h37.5C135.11,562.32,151.52,551.78,151.52,533.61z"/>
<path class="st1" d="M347.22,608.61l-75.15-111.62v111.62h-47.46l-0.15-236.13h77.05c44.09,0,80.27,33.98,80.27,76.46
c0,30.32-18.31,56.84-43.65,65.77l67.09,93.9H347.22z M271.93,478.83l30.47,0.15c16.11,0.15,30.47-12.89,30.47-29.74
s-14.5-29.74-30.47-29.74h-30.47V478.83z"/>
<path class="st1" d="M571.2,575.65h-94.48l-15.09,32.96h-51.27l112.79-241.99h1.46l112.94,241.99h-51.42L571.2,575.65z
M552.74,535.22l-28.71-63.13l-28.86,63.13H552.74z"/>
<path class="st1" d="M850.98,371.89v241.11h-2.2L708.6,476.63v132.28h-47.46V368.08h2.34l139.89,136.08V371.89H850.98z"/>
<path class="st1" d="M1083.6,490.84c0,73.24-46.58,117.77-122.9,117.77H892V372.63l68.7-0.15
C1037.02,372.33,1083.6,417.16,1083.6,490.84z M1035.7,490.69c0-44.24-28.42-71.19-75.15-71.19h-21.24v141.8h21.68
C1007.43,561.3,1035.7,534.64,1035.7,490.69z"/>
<path class="st1" d="M1102.06,567.89l37.94-26.66c10.4,16.7,25.49,24.32,45.85,24.32c22.27,0,37.21-9.08,37.21-21.68
c0-17.29-28.27-30.91-53.03-43.21c-26.51-13.18-55.66-27.69-55.66-65.33c0-40.87,34.57-67.82,77.93-67.82
c32.23,0,58.89,13.33,69.58,41.89l-35.01,24.46c-7.03-14.06-20.65-19.78-33.84-19.78c-17.72,0-30.91,10.25-30.91,22.41
c0,14.06,17.87,18.9,44.97,31.64c39.11,18.46,63.72,38.38,63.72,74.71c0,43.07-35.16,70.46-85.69,70.46
C1146.44,613.3,1117.88,597.19,1102.06,567.89z"/>
</g>
</svg>
</div>
</body>
</html>
MY CSS
margin: 0 ;
padding: 0;
width: 100%;
}
body {
margin: 0;
padding: 0;
width: 100%;
text-align: center ;
height: 100vh;
display: table ;
background-color: black;
}
.wrapper {
position: absolute;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 30%;
}
.st0{
fill:none;
}
.st1{
fill:none;
stroke:;
stroke-width:3;
stroke-miterlimit:10;
}
path {
stroke: white ;
fill: #fff;
stroke-dasharray: 300;
opacity: 10;
animation: animate 3s cubic-bezier(0,0.23,1,.1) infinite;
}
#keyframes animate {
0% {
opacity: 0;
fill: none;
stroke-dashoffset: 300;
}
30% {
opacity: 10;
fill: none ;
stroke-dashoffset: 300;
}
90% {
opacity: 50;
/*fill: rgba(255,255,255,1);*/
}
100% {
opacity: 10;
/*fill: rgba(255,255,255,1);*/
}
}
and my JS
function change(){
var button = document.getElementById('b1'),
estado = document.getElementsByClassName("st1");
button.onclick = function() {
estado.style.animationPlayState = "paused";
}
}
Much appreciated !
There are a few things that you got wrong with your JS.
By binding the change() function on the button in your HTML, you're executing it every time the user clicks it, but the function itself binds a click event to your button. Since you're already binding the event in the JS (which is the best practice, by the way), you need to remove the change() function from your HTML and just call it directly, so the click event will be bound only once.
getElementsByClassName, as the plural in the name suggests, doesn't return a single element but rather a collection of elements, which means that you have to loop through the collection to access the style attribute of each element.
I need some help about svg's. There is a "background image". Another "image" is laid over it. The "image" has to have a hole cut out of it so that the background image is shining through. I achieved this by using svg:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
<style>
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
</style>
</head>
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
</defs>
<path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z "
fill="url(#wood)" fill-rule="evenodd"/>
</svg>
</body>
I could not use mask filters of css cause of browser compatibility. I dont want to use a svg/js framework.
So far so good. Now i want to go a step further.
I want this hole to have a transparent gradient. So that the inner rects borders are not that hard as in current version. I dont know how to do it.
Furthermore i want to animate this hole to get bigger over time. I would do it by using js. Is there another way? Maybe by changing the whole structure of html?
Any help is appreciated.
Firstly, there should be no issue with masks applied to SVG elements. There are some browser compatibility related to SVG masks being applied to HTML elements, but not when they are applied to SVG elements.
In fact a mask is the obvious solution to your issue. To get the soft edges to the hole, we'll apply a blur filter to a rectangle, then use that as a mask to create the hole.
body{
background-repeat: no-repeat;
background-size: cover;
}
#svg-door {
background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg);
background-size: cover;
box-sizing: border-box;
padding: 100px;
width: 100%;
height: 500px;
}
#wood {
border-radius: 50%;
}
<
<body background="https://www.w3schools.com/css/img_fjords.jpg" >
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door">
<defs>
<pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768">
<image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/>
</pattern>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/>
</mask>
<filter id="hole-blur">
<feGaussianBlur stdDeviation="2"/>
</filter>
</defs>
<path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/>
</svg>
</body>
I have embedded an svg file into an html file and can view it in all browsers and platforms. I now want to make specific paths within the svg clickable. I have used an onclick event to perform this function, however, I have only been able to get a javascript alert box to popup when the path is clicked. Instead of the default javascript alert, I need a custom popup which I can then include unique custom text and a hyperlink url for each of the paths. Therefore, each path would have its own text and hyperlink.
Does anyone know the best/easiest way to accomplish this?
Excerpts from my code below:
<script>
function notify(evt){alert(evt.target.id)}
</script>
<style>
path:hover {
fill: #456353; opacity: .5
}
</style>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="771.429px" height="986.584px" viewBox="0 0 771.429 986.584" enable-background="new 0 0 771.429 986.584"
xml:space="preserve">
<g id="Base_map" display="none">
<g id="ahf8dJ.tif" display="inline">
<path onclick="top.notify(evt)" id="Plot1" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M585.308,538.849l68.457,19.287l-0.662,6.611
l14.383,3.473l3.637,6.115l-7.439,24.797l52.404,22.814l3.307-4.795c0,0-6.613-1.322-12.729-4.793
c-6.117-3.473-11.076-11.076-16.037-19.176c-4.959-8.102-11.406-24.303-13.885-30.748c-2.48-6.447-9.313-8.322-15.484-11.518
s-6.725-4.848-8.816-8.928c-2.094-4.076-5.182-0.77-9.479,2.756c-4.299,3.527-14.658,0.332-18.734-0.66
c-4.078-0.992-13.006-3.197-19.838-3.748c-6.622-0.534-11.512-2.177-18.828-4.151L585.308,538.849z" />
<path onclick="top.notify(evt)" id="Plot2" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M668.644,531.851
c1.652,5.621,2.645,10.084,3.305,12.729c0.662,2.645,0.662,5.125-1.652,5.291s-7.439-1.984-10.912-5.455
c-3.471-3.473-4.133-5.457-3.305-13.061c0.826-7.604,0.992-13.061,4.133-13.887s5.125,3.141,5.951,5.951
S668.644,531.851,668.644,531.851z"/>
<path onclick="top.notify(evt)" id="Plot3" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M520.358,495.1c9.752,1.487,25.291,6.499,32.4,8.152
c7.107,1.653,20.168-1.323,27.938-3.637c7.77-2.314,9.424-0.496,12.068,1.653c2.645,2.148,6.281,6.446,9.918,11.241
s1.322,7.604-0.496,11.572c-1.818,3.967,0.992,3.967,4.959,6.117c3.969,2.148,4.959-1.324,7.439-4.133
c2.48-2.811,6.117-2.48,9.754-0.662s6.447,7.936,9.422,12.068c2.977,4.133,4.133,3.471,11.242-0.166s9.422-15.539,9.422-20.168
s1.158-8.1,3.141-9.092c1.984-0.991,1.984-2.976,1.158-6.944c-0.014-0.066-0.315-1.538-0.332-1.612l-2.634,2.961
c-5.442,5.389-9.572,2.361-9.572,2.361c-3.515-1.625-5.985-2.104-5.985-2.104c-2.828-0.583-2.688-3.301-2.688-3.301
c-1.438-4.905-4.737-1.592-4.737-1.592c-5.55,6.503-23.852-2.333-23.852-2.333c-8.073,14.763-13.349,2.333-13.349,2.333
c-3.5-8.372-13.794-5.053-13.794-5.053c-29.848,9.112-39.272,4.207-39.272,4.207l-19.986-5.606L520.358,495.1z"/>
<path onclick="top.notify(evt)" id="Plot4" fill="#BDD5CC" stroke="#939598" stroke-miterlimit="10" d="M626.487,533.173c3.307,4.465,4.299,6.943,1.322,6.777
c-2.975-0.164-16.695-1.982-25.953-3.637c-9.258-1.652-18.846-4.959-29.426-7.439c-10.58-2.479-15.209-4.297-17.523-5.289
s-4.463-3.141,0.496-3.803c4.959-0.66,14.879,0.662,18.35,1.984s16.035,5.125,19.672,6.447s12.398,5.291,15.705,5.125
s6.117-2.148,7.439-3.803c1.322-1.652,5.125-2.977,6.281-1.322C624.009,529.867,626.487,533.173,626.487,533.173z"/>
Add a custom attribute to each of your paths to store the URL you want to open:
<path d="M10,60 L50,10 90,60" data-url="http://www.google.com/" />
Then access this URL in your event handler:
var url = evt.target.getAttribute('data-url');
Then open a popup window with that URL:
window.open(url);
So the complete script becomes:
function notify(evt){
var url = evt.target.getAttribute('data-url');
window.open(url);
}
If I am right in that your need is for something like alert("xxx") which can contain any HTML...
There's 3 parts: a style, a div and a function to show the popup
<style>
#popupInfo
{
visibility: hidden;
position: absolute;
top: 100px;
left: 100px;
width: auto;
height:auto;
margin-left: 5px;
z-index: 5;
background-color: #ffffff;
padding: 0px;
border: 1px solid #a0a0a0;
border-radius: 10px;
box-shadow: 1px 3px 2px rgba(20,20,20,0.3);
}
#closeButton
{
position: absolute;
width: 32px;
height: 32px;
background: transparent url(X_light.gif);
right: 5px;
top: 5px;
}
#closeButton:hover
{
background: url(X_dark.gif);
z-index: 99;
}
</style>
<body>
<div id="popupInfo"">
<div id="closeButton" onclick="document.getElementById('popupInfo').style.visibility = 'hidden';"></div>
<table style="width:100%;">
<tr style="height:32px;"><td ></td></tr>
<tr><td id="popupInfoText"></td></tr>
</table>
</div>
...
<script type="text/javascript">
function popupInfo(newtext, width, height){
var popStyle= document.getElementById("popupInfo").style
if( width ) popStyle.width=width.toString()+'px';
if( height ) popStyle.height=height.toString()+'px';
document.getElementById("popupInfoText").innerHTML = newtext;
popStyle.visibility = 'visible';
}
</script>
The "X_light.gif" and "X_dark.gif" are 32x32pixel grey X's on transparent used as the Close button.
A call to e.g. popupInfo("<H1>Alert!</H1>This is a message!"); will show the message.
To get an html document from a file you could do it several ways, if they are fixed files then you could:
popupInfo("<IFRAME src='message.html'></IFRAME>");
where message.html is like:
<H1>Hello there!</H1>
<p>This is a test message</p>
The result being:
...a nice image that I can't post as a guest :(
Enjoy!
TonyWilk