I have a JavaScript file which essentially draws a line when the user scrolls down the page. It draws a line for the first SVG but not for the other (which uses the same class). For example, I have the following code block in both text-repeater.php and text-block.php:
<svg height="100" width="200">
<line class="line__svg" id="line" x1="0" y1="0" x2="0" y2="200" />
</svg>
And here is my parallax.js file:
var scrollLine = document.getElementById("line");
var length = scrollLine.getTotalLength();
// Start position of drawing
scrollLine.style.strokeDasharray = length;
// Find scroll percentage on scroll
window.addEventListener("scroll", myFunction);
function myFunction() {
var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
var draw = length * scrollpercent;
// Reverse drawing (when scrolling upwards)
scrollLine.style.strokeDashoffset = length - draw;
}
The line draws in text-block.php but not in text-repeater.php
Ideas why?
Also, on a related note. How can I get the line to draw longer? It's very subtle at the moment.
That's how IDs work. You only can have one instance of an Id (kind of - there are tricks but you don't want to do that).
Instead use classes...
<tagName class="line">
...and loop over it:
// Selecting all lines
const scrollLineCollection = document.querySelectorAll(".line");
for ( const scrollLine of scrollLineCollection ) {
// do something with scrollLine
}
Trying to make an svg rectangle that moves when button pushed. Right now I just want the x to be modified by a function.
function modX()
{
document.getElementById("rectangle").transform = 'translate(295 115)';
}
var x = 20;
var y = 20;
modX();
<svg width="1000" height="1000" >
<rect id="rectangle" x="0" y="20" width="100" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)"></rect>
</svg>
I'm fairly new to code so please avoid css or jquery.
you can change its x by using javaScript document.getElementById("rectangle").setAttribute('x', X_value)
set the X_value to the value you want it to change.
I tried using snap.js to achieve the morphing effect between my two blob shapes. However, the morphing transition is not as sooth as the example that I followed here. I created the shape in illustrator and exported it as svgs. Does anyone know what I can do to make the shape transition smoother without all the edges?
HTML
<svg id="blobs" width="1000x" height="1000px" style="display:block; xmlns="http://www.w3.org/2000/svg">
<path id="blob1" style="fill:#1B418C;" d="M97,183.67c-16.88-17.07-52.33,5.65-66.76-11.5-6.89-8.19-6.29-22.28-.78-30.66,7.24-11,22.89-13.06,37.67-12.77,55.35,1.09,88.12,1.66,114.19-1.28,22.39-2.52,44.1-5.24,66.17-21.08,18.16-13,24.94-26.61,35.13-39.6,29.43-37.52,70.95-49.29,102.08-58.12C474.6-16.84,586.8,17.4,601.17,66.78c.86,3,6.27,21.55-2.34,38.33-8.14,15.85-22.78,17-37.28,29.59-26.27,22.74-31.84,58-32.67,64.38-6,46.27,31,56.52,30.13,110.42-.13,8.17-.72,45-26.93,70.9-18.42,18.22-41,22.66-49.78,24.28-37.85,6.94-66.37-8.14-180.35-46.63-16.93-5.72-36.42-12.26-48-2.56-12.8,10.71-4.64,30.63-11.13,52.38-12.47,41.79-72.44,68.26-122.13,64.31C70.42,468.17,9.16,431.32,1,372.74-4,337.25,10.09,290.55,39,269.26c25.48-18.74,49.93-17.2,60.9-41.52C105.88,214.58,107.34,194.12,97,183.67Z"/>
<path opacity ="0" id="blob2" style="fill:#e29f27;" d="M339.37,14.68C393.67,53,361,146,405.32,167.41c27.67,13.41,44.91-20.72,105.38-17.23,13.63.79,76.17,4.41,102.16,51.2,1.08,1.94,20.54,38.24,5.72,73.58-14.52,34.64-44.42,26.47-74.46,65.27-29.78,38.48-16.82,67.74-45,84.67-20.37,12.22-48.3,9.65-67.5,1.29-45.57-19.82-43.69-73-98.9-92.4a107,107,0,0,0-18.13-4.55c-47-8.28-83.64,11.63-103.88,19.68-58,23.06-150,15.75-188-31.76-28.21-35.34-31.36-99-2.6-135,40.71-50.93,115-8.36,167.53-63.36,38.77-40.57,20.83-87.08,62.27-109.38C275.43-4.3,313.67-3.44,339.37,14.68Z"/>
</svg>
JAVASCRIPT:
var svg = document.getElementById("blobs");
var s = Snap(svg);
var Blob1 = Snap.select('#blob1');
var Blob2 = Snap.select('#blob2');
var Blob1Points = Blob1.node.getAttribute('d');
var Blob2Points = Blob2.node.getAttribute('d');
var toBlob2 = function(){
Blob1.animate({ d: Blob2Points }, 2000, mina.getById(blob1), toBlob1);}
var toBlob1 = function(){
Blob1.animate({ d: Blob1Points }, 2000, mina.getById(blob2), toBlob2);}
toBlob1();
My code
Any help would be greatly appreciated,
Thank You.
I am making use of canvg to convert svg present in div into canvas(upto this it's working fine) and then copying the innerHTML of div to another div, but it's not working. Canvas is coming but nothing will be present in that canvas.
Thanks in advance
<div id="k">
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
</div>
<div id="kk">
<p>Watch me</p>
</div>
var svgTag = document.querySelectorAll('#k svg');
svgTag = svgTag[0];
var c = document.createElement('canvas');
c.width = svgTag.clientWidth;
c.height = svgTag.clientHeight;
svgTag.parentNode.insertBefore(c, svgTag);
svgTag.parentNode.removeChild(svgTag);
var div = document.createElement('div');
div.appendChild(svgTag);
canvg(c, div.innerHTML);
setTimeout(function(){
var data = $("#k").html();
$("#kk").append($(''+data+''));
},5000);
JSFiddle
The content of a canvas element is held as binary data, much like the content of an image element. Canvas elements do not have an innerHTML text property that can be used to recreate the canvas.
The following example shows a method of cloning a canvas element using standard canvas 2D methods:
function canvasClone(c1) {
var c2 = document.createElement('canvas');
c2.width=c1.width;
c2.height=c1.height;
c2.getContext("2d").drawImage(c1, 0,0);
return c2;
}
You can demonstrate it by including the function in the fiddle and changing the timeout processing to:
setTimeout(function(){
kk.appendChild(canvasClone(c));
},5000);
Feel free to rewrite the timeout code in JQuery if you prefer.
Please can you help me? I´m looking for a way, how to map a polygon in canvas with image file (.png or .jpg) but I´m quite confused and I don´t know how to do it... Can you tell me or give a link to a tutorial how to map a polygons in canvas with images? Thank you very much
Ok, I think I understand your question now.
You want to draw text a curved path...
Good news/Bad news:
Canvas cannot do this directly.
However you can use Html SVG to do it.
You can use a free program like Inkscape to design your logo.
Then just save it in SVG format (myLogo.svg).
Then you can load it into canvas like this:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img=new Image();
img.onload=function(){
ctx.drawImage(img,0,0);
}
img.src="http://mySite.com/myLogo.svg";
Here is a quick demo of the kind of SVG you can create to fit your needs.
And here is a Fiddle: http://jsfiddle.net/m1erickson/v4EX3/
<!doctype html>
<html>
<head>
<style>
body{ background-color: ivory; }
div{float:left;}
</style>
</head>
<body>
<div>
<svg viewBox = "0 0 200 120">
<defs>
<path id = "curvedPath" d = "M 10,90 Q 100,15 200,70 Q 340,140 400,30"/>
</defs>
<g fill = "white">
<use x = "0" y = "0" xlink:href = "#curvedPath" stroke = "black" stroke-width="40" fill = "none"/>
<text font-size = "20">
<textPath xlink:href = "#curvedPath">
Use SVG to put your text on a curved path like this!
</textPath>
</text>
</g>
</svg>
</div>
</body>
</html>