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 have graphics on my page with embedded svg files.
<object id="inspektion-svg" data="images/SVG/Inspektion.svg" type="image/svg+xml">
<!---Fallback--->
<!-- Your Browser cannot show svg. -->
</object>
The SVG files look like this:
<svg xmlns="http://www.w3.org/2000/svg" width="96.885" height="74.674" viewBox="0 0 96.885 74.674">
<defs>
<style>
.cls-1, .cls-2 {
fill: none;
stroke: #c2d9ef;
stroke-width: 4px;
}
.cls-1 {
stroke-miterlimit: 10;
}
.cls-2 {
stroke-linejoin: round;
}
</style>
</defs>
<g id="Gruppe_40" data-name="Gruppe 40" transform="translate(-367 -53)">
<path id="Pfad_76" data-name="Pfad 76" class="cls-1" d="M455.808,65v50.481H371V65" transform="translate(2.038 10.192)"/>
<path id="Pfad_77" data-name="Pfad 77" class="cls-1" d="M400,63.077V55h18.173v8.077" transform="translate(31.597)"/>
<path id="Pfad_78" data-name="Pfad 78" class="cls-1" d="M376,63.077V55h18.173v8.077" transform="translate(7.135)"/>
<path id="Pfad_79" data-name="Pfad 79" class="cls-1" d="M381.115,71.115H369V59h92.885V71.115H449.77" transform="translate(0 4.077)"/>
<path id="Pfad_80" data-name="Pfad 80" class="cls-2" d="M401.472,82.246,405.494,62.8,383.333,91.876l13.5-1.676-4.022,19.442L414.969,80.57Z" transform="translate(14.608 7.954)"/>
</g>
</svg>
Now I want to change the stroke color subsequently via CSS.
If I create a CSS class like:
.darkstroke {
stroke: #7ca7d7;
}
And assign it to the object, nothing changes. Also, when I modify the svg and remove all <style> attributes does not help.
Is there any possibility to do that?
Thanks in advance.
Regards
Lars
.darkstroke isn't an element inside your svg. To interact with the SVG you need to apply the stroke to something inside the SVG (usually a <path>).
So something like this:
#Pfad_76 {
stroke: blue;
}
However, there are several issues with using external styles and an svg embedded using <object>. Basically, you need to define your styles inside the svg. If you want to use an external style sheet you need to have this (change paths) INSIDE the svg file.
<?xml-stylesheet type="text/css" href="svg.css" ?>
<svg>...</svg>
That said, typically your best bet if you need to modify the SVG later is to simply place the SVG code into the HTML without using the embed object.
you need to have a higher qualifier in the css in order to override the inline css from the svg. So simply by adding an additional qualifier the css in the css file now outranks the one in the svg.
svg .cls-1{
stroke: red;
}
<svg xmlns="http://www.w3.org/2000/svg" width="96.885" height="74.674" viewBox="0 0 96.885 74.674">
<defs>
<style>
.cls-1, .cls-2 {
fill: none;
stroke: #c2d9ef;
stroke-width: 4px;
}
.cls-1 {
stroke-miterlimit: 10;
}
.cls-2 {
stroke-linejoin: round;
}
</style>
</defs>
<g id="Gruppe_40" data-name="Gruppe 40" transform="translate(-367 -53)">
<path id="Pfad_76" data-name="Pfad 76" class="cls-1" d="M455.808,65v50.481H371V65" transform="translate(2.038 10.192)"/>
<path id="Pfad_77" data-name="Pfad 77" class="cls-1" d="M400,63.077V55h18.173v8.077" transform="translate(31.597)"/>
<path id="Pfad_78" data-name="Pfad 78" class="cls-1" d="M376,63.077V55h18.173v8.077" transform="translate(7.135)"/>
<path id="Pfad_79" data-name="Pfad 79" class="cls-1" d="M381.115,71.115H369V59h92.885V71.115H449.77" transform="translate(0 4.077)"/>
<path id="Pfad_80" data-name="Pfad 80" class="cls-2" d="M401.472,82.246,405.494,62.8,383.333,91.876l13.5-1.676-4.022,19.442L414.969,80.57Z" transform="translate(14.608 7.954)"/>
</g>
</svg>
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 am using an SVG/Path to generate a large upward pointing triangle...see the related link below for some background info.
Background Info
What I am trying to do is add an inset, blurred shadow (simiar to box-shadow) on two sides of the triangle (top-left and top-right), but not the base of the triangle. Also trying to taper the shadow so that it does not touch the base of the triangle. The following link is screenshot with a rough, but not exact, idea of what I am looking to do.
Shadow Example
Here is the code I have so far:
svg#bigTriangleColor {
pointer-events: none; background: red;
}
.container svg {
display: block;
}
svg:not(:root) {
overflow: hidden;
}
#bigTriangleColor path {
fill: #EEEEEE;
stroke: #EEEEEE;
stroke-width: 2;
}
<svg id="bigTriangleColor" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M0 100 L50 2 L100 100 Z"></path>
</svg>
Thanks in advance, any help is greatly apprecizted...
Add a grey shape behind the triangle to represent the shadow. Then blur it.
<svg width="100%" height="100" viewBox="0 0 600 100" preserveAspectRatio="none">
<defs>
<filter id="blur">
<feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
</filter>
</defs>
<polygon points="0,0, 600,0, 600,80, 300,20, 0,80" fill="#999" filter="url(#blur)"/>
<polygon points="0,0, 600,0, 600,65, 300,20, 0,65" fill="black"/>
</svg>
I've been trying to have an image which appears blurred but when the mouse hovers over, it clears that tiny bit where the cursor points. Much alike the www.canva.com website.
Here is my code so far, it's not working 100%. I'm using HTML, CSS and Javascript. Unfortunately, I'm completely new to javascript!
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QuoteWall</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/javascript" href="javascript.js">
</head>
<body>
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="image.png" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="image.png" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
</div>
</body>
</html>
CSS:
body {
margin: 0;
}
.pic {
text-align: center;
position: relative;
height: 250px;
}
.blur {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
Javascript:
$('.pic').mousemove(function (event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
var mask = $('#mask1 circle')[0];
mask.setAttribute("cy", (upY - 5) + 'px');
mask.setAttribute("cx", upX + 'px');
});
Any help would be appreciated.
Thanks,
Joe
This is an experimental solution. You dynamically inject a new circle element in your svg mask each mouseover then you hide each circle with a delay.
var svgNS = "http://www.w3.org/2000/svg";
$('.pic').mousemove(function (event) {
event.preventDefault();
var upX = event.clientX;
var upY = event.clientY;
var mask = $('#mask1')[0];
var circle = document.createElementNS(svgNS,"circle");
circle.setAttribute("cx", upX);
circle.setAttribute("cy", upY);
circle.setAttribute("r", "30");
circle.setAttribute("fill", "white");
circle.setAttribute("filter", "url(#filter2)");
mask.appendChild(circle);
setTimeout(function(){
circle.style.opacity = '0';
setTimeout(function(){
mask.removeChild(circle);
}, 300);
}, 300);
});
.pic {
text-align: center;
position: relative;
height: 250px;
}
.blur {
height: 100%;
}
.overlay {
position: absolute;
top: 0px;
left: 0px;
height: 100%;
}
circle {
opacity: 1;
-webkit-transition: opacity 200ms linear;
transition: opacity 200ms linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
Your HTML should be like this with jQuery before the script I gave you. You have to respect the hierarchy of your scripts.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QuoteWall</title>
<link rel="stylesheet" type="text/css" href="style.css"> //The css I gave you
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> //jQuery here
<script type="text/javascript" src="javascript.js"></script> //The script I gave you
</head>
<body>
<div class="pic">
<svg class="blur" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%">
<image filter="url(#filter2)" xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%"></image>
<filter id="filter2">
<feGaussianBlur stdDeviation="5" />
</filter>
<mask id="mask1">
<circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" />
</mask>
<image xlink:href="http://sport-nc.com/wp-content/uploads/2015/06/India_Surf_Tours_-_17__1_.jpg" width="100%" height="100%" mask="url(#mask1)"></image>
</svg>
</div>
</body>
</html>
I would recommend that you give id to the div where image is being rendered, So considering id of your image div is divImage like :
HTML:
<div id="divImage">
//Your Image inside this div
</div>
So in your JS you can write :
$("#divImage").hover(function(){
//Your Complete on hover function here.
})
I guess this should work.
I would use this How to blur some portion of Image.
have some blur mask (fully filled with blur)
Handle OnMouseMove event
Just clear the blur in mask area around actual mouse position during mouse movement.
On some periodic event like OnTimer
blur out the mask so any cleared space is diminishing with time. Then apply masked blur (from linked Q/A) on your image and paint it into your viewing area.