I am using vanilla javascript to navigate the pages of a comic book. However, I need to setup a condition that checks if the points in the current polygon intersects with the points in the next polygon. If true, I want the viewBox to animate from the current points to the next points, if false let nothing happen (use the default fade transition).
Here is a section of my code
var DELAY = 400;
function nextArea() {
if (isFirstPage() || areaIndex >= areas.length - 1) {
changePage(true);
changeArea();
} else {
fade();
areaIndex++;
setTimeout(changeArea, DELAY);
}
}
function prevArea() {
if (isLastPage() || areaIndex <= 0) {
changePage(false);
changeArea();
} else {
fade();
areaIndex--;
setTimeout(changeArea, DELAY);
}
}
function changeArea() {
if (isFirstPage() || isLastPage()) {
return;
}
var activeArea = areas[areaIndex];
var points = activeArea.getAttribute('points').split(' ');
var xy1 = points[0].split(',');
var xy2 = points[1].split(',');
var xy3 = points[2].split(',');
var box = [xy1[0], xy1[1], xy2[0] - xy1[0], xy3[1] - xy2[1]];
activePage.classList.remove('fade');
activePage.setAttribute('viewBox', box.join(' '));
activeRect = rects[pageIndex - 1];
activeRect.setAttribute('x', xy1[0]);
activeRect.setAttribute('y', xy1[1]);
}
My code repository is here: https://github.com/cnario/svg-carousel
Here is what I have thus far: https://cnario.github.io/svg-carousel/
Here is how I expect it to act: https://read.marvel.com/#book/41323
I suppose this is what you may need: a way to transition the viewBox from one value to another so that every time you have only one part of the svg in the viewBox.
let BB = {};
BB.tomato = tomato.getBBox();
BB.skyblue = skyblue.getBBox();
BB.gold = gold.getBBox();
let radios = document.querySelectorAll("#controls input");
radios.forEach(r =>{
let color = r.dataset.color;
let bb = BB[color];
r.addEventListener("change",()=>{
svg.setAttributeNS(null,"viewBox", `${bb.x} ${bb.y} ${bb.width} ${bb.height}`)
svg.style.height = `${bb.height * 300 / bb.width}px`;
})
})
svg {
width: 300px;
border: 1px solid;
height: 600px;
transition: height 1s;
}
<p id="controls">
<label>tomato: <input type="radio" name="selector" data-color="tomato" /></label>
<label>skyblue: <input type="radio" name="selector" data-color="skyblue" /></label>
<label>gold: <input type="radio" name="selector" data-color="gold" /></label>
</p>
<svg id="svg" viewBox="0 0 100 200">
<g id="tomato">
<circle cx="35" cy="70" r="25" fill="tomato" />
</g>
<g id="skyblue">
<ellipse cx="75" cy="160" rx="15" ry="35" fill="skyblue" />
</g>
<g id="gold">
<polygon fill="gold" points="75,15 60,30 90,30" />
</g>
</svg>
Related
i have a 3divs inside of a container and when i click div number 1 i want the others to disappear
but it works only when i click the "rock" div
The parent div is called "choices" in the JS file
i am trying to loop over the child divs to keep the clicked one and hide the others
choices.addEventListener("click", (e) => {
let currentTag = e.target.tagName;
let current;
if (e.target.className !== "choices") {
// to make sure the user click on the choices only
switch (
currentTag // to get the div element even if the user clicked the svg or the path
) {
case "DIV":
current = e.target;
console.log(current);
break;
case "svg":
current = e.target.parentElement;
console.log(current);
break;
case "path":
current = e.target.parentElement.parentElement;
console.log(current);
break;
default:
break;
}
current.setAttribute("chosen", "true");
for (i = 0; i < choicesList.length; i++) {
choicesList[i].hasAttribute("chosen") ?
"" :
choices.removeChild(choicesList[i]);
}
}
});
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>
and here is the link for codepen : https://codepen.io/omarmahdy/pen/JjpEMaV
There is a problem with your child selector. My suggestion is to use querySelectorAll() and add a second class to all options. I created a working fork here: https://codepen.io/foorschtbar/pen/OJQWZJJ
const choicesList = document.querySelectorAll(".choice");
<!-- Scissors -->
<div class="scissors choice">
[...]
</div>
<!-- Rock -->
<div class="rock choice">
[...]
</div>
<!-- Paper -->
<div class="paper choice">
[...]
</div>
(i hope i understand your problem right and is now fixed)
IMHO you should apply a CSS-class with classList.add('class-name) to all the child div elements of choices:
document.querySelectorAll('.choices div').forEach(el => el.classList.add('class-name');
Then you remove this class for the clicked element after wards. That CSS-Class only needs to contain: display: none;
var choices = document.querySelector('.choices');
choices.addEventListener('click', e => {
var scissors = document.querySelector('.scissors'),
rock = document.querySelector('.rock'),
paper = document.querySelector('.paper');
document.querySelectorAll('.choices div').forEach(el => el.classList.add('d-none'));
if (e.target.classList.contains('scissors')) {
scissors.classList.remove('d-none');
}
if (e.target.classList.contains('rock')) {
rock.classList.remove('d-none');
}
if (e.target.classList.contains('paper')) {
paper.classList.remove('d-none');
}
});
.d-none {
display: none;
}
<div class="choices" vassel="true">
<!-- Scissors -->
<div class="scissors">
<svg class="scissors" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path
class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"
/>
</svg>
</div>
<!-- rock -->
<div class="rock selection">
<svg class="rock" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path
class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"
/>
</svg>
</div>
<!-- Paper -->
<div class="paper selection">
<svg class="paper" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path
class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"
/>
</svg>
</div>
</div>
You need to manipulate the styling of each div that you needs to be removed. I have written a code to add display:none; property to the div those you need to remove.
const rockDiv = document.querySelectorAll(".rock");
const paperDiv = document.querySelectorAll(".paper");
const scissorsDiv = document.querySelectorAll(".scissors");
for (let i = 0; i < rockDiv.length; i++) {
rockDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < paperDiv.length; i++) {
paperDiv[i].addEventListener("click", ()=>{
rockDiv[i].style.display = "none";
scissorsDiv[i].style.display = "none";
});
}
for (let i = 0; i < scissorsDiv.length; i++) {
scissorsDiv[i].addEventListener("click", ()=>{
paperDiv[i].style.display = "none";
rockDiv[i].style.display = "none";
});
}
Details commented in example, refer here for the CSS
// Score counters
let T = 0;
let W = 0;
let L = 0;
// Reference the <form>
const RPS = document.forms.RPS;
// Register <form> to the click event
RPS.onclick = pick;
// Event handler passes Event Object
function pick(e) {
// Reference ALL form controls
const IO = this.elements;
// The tag the user clicked
const clk = e.target;
// If the tag clicked is an <input>..
if (clk.matches('input')) {
// Disable <label>s
IO.choices.disabled = true;
// Add .picked class to <form>
this.classList.add('picked');
// Get a random number 0-2
let r = Math.floor(Math.floor(Math.random() * 6) / 2);
/* Pass:
** All form controls,
** Random number,
** and #id of clicked <label>
** to outcome(IO, r, id)
*/
switch (clk.id) {
case 'R':
console.log('Rock');
outcome(IO, r, 'R');
break;
case 'P':
console.log('Paper');
outcome(IO, r, 'P');
break;
case 'S':
console.log('Scissors', );
outcome(IO, r, 'S');
break;
default:
break;
}
}
}
/*
** Pass all form controls, random
** number, and #id of clicked
*/
function outcome(node, vs, user) {
// 'R'ock, 'P'aper, 'S'cissors
let rpsA = ['R', 'P', 'S'];
// Index of user's pick
const sv = rpsA.indexOf(user);
/*
** Clone the `<label>` that
** corresponds to opponent's index
*//*
** Add .vs class to opponent
*//*
** Add opponent to #choices
*/
const opponent = document.querySelector(`[
for='${rpsA[vs]}'
]`).cloneNode(true);
opponent.classList.add('vs');
node.choices.append(opponent);
/**
** One line nested ternary to
** resolve win, lose, or tie
*/
let result = vs === sv ? 'tied' :
vs === sv + 1 ? 'lost' :
vs === 0 && sv === 2 ? 'lost' : 'win';
// Increment score
switch (result) {
case 'tied':
T++;
break;
case 'win':
W++;
break;
case 'lost':
L++;
break;
default:
break;
}
// Display score
node.w.value = W;
node.l.value = L;
node.t.value = T;
// Array for final outcome
const roshambo = ["Rock", "Paper", "Scissors"];
// Message of outcome
let msg = `You played ${roshambo[sv]},
your opponent played ${roshambo[vs]}, you ${result}!`;
// Display message
node.msg.value = msg;
}
// Register <form> to reset event
RPS.onreset = reset;
// Resets game
function reset(e) {
this.classList.remove('picked');
this.choices.disabled = false;
document.querySelectorAll('label').forEach(tag => {
if (tag.classList.contains('vs')) {
tag.remove();
}
});
}
html {
font: 300 1ch/1.1 'Segoe UI'
}
form {
width: 100%;
min-height: 100vh;
padding: 2rem;
color: white;
}
#choices {
border: 0;
margin: 0 auto;
}
input,
output,
button {
font: inherit;
font-size: 100%;
}
legend,
button {
font-size: 1.25rem;
}
[type='radio'] {
display: none
}
[type='radio']:checked+label {
color: cyan
}
[type='radio']:checked+label * {
fill: cyan
}
label.vs {
color: gold
}
label.vs * {
fill: gold;
}
.picked {
background: #3B4262;
}
output {
display: inline-block;
width: 4rem;
margin-bottom: 0.5rem;
}
output::before {
content: attr(value);
}
#msg {
display: inline-block;
width: 100%;
}
[type='reset'] {
position: relative;
top: 14vh;
}
.as-console-row::after {
width: 0;
font-size: 0;
}
.as-console-row-code {
width: 100%;
word-break: break-word;
}
.as-console-wrapper {
max-height: 15% !important;
max-width: 50%;
margin-left: 50%;
}
<form id='RPS'>
<fieldset id='choices'>
<legend>
<label>Wins:
<output id='w'></output>
</label>
<label>Lost:
<output id='l'></output>
</label>
<label>Tied:
<output id='t'></output>
</label><br>
<output id='msg'></output>
</legend>
<!-- rock -->
<input id='R' name='rps' type='radio'>
<label for='R' class="rock">
<svg class="rock svg" xmlns="http://www.w3.org/2000/svg" width="48" height="48">
<path class="rock"
fill="#3B4262"
d="M45.06 12.22c-.642-8.096-9.734-7.269-9.734-7.269-3.837-6.765-9.832-1.865-9.832-1.865-4.606-6.63-10.38-.486-10.38-.486-9.957-1.074-9.571 7.066-9.571 7.066-.234 2.588 1.403 10.593 1.403 10.593-1.477-4.614-4.68-.784-4.68-.784-3.94 6.078-.975 9.405-.975 9.405 5.33 6.246 16.688 13.743 16.688 13.743 4.113 2.356 2.373 4.457 2.373 4.457l24.876-4.11.571-4.718c3.782-11.436-.739-26.032-.739-26.032z"/></svg></label>
<!-- Paper -->
<input id='P' name='rps' type='radio'>
<label for='P' class="paper">
<svg class="paper svg" xmlns="http://www.w3.org/2000/svg" width="49" height="59">
<path class="paper"
fill="#3B4262"
d="M47.125 11.832a2.922 2.922 0 00-1.232-.198c-.57.04-1.029.271-1.302.65-1.604 2.248-2.919 6.493-3.979 9.905-.486 1.577-1.14 3.688-1.612 4.69-.493-2.807.064-13.09.28-17.05l.003-.064c.15-2.751.17-3.234.138-3.446-.238-1.509-.843-2.5-1.799-2.943-.966-.45-2.22-.25-3.572.563-.677.41-.865 1.816-1.446 8.19l-.002.028c-.32 3.502-1.058 11.566-1.965 12.91-1.023-1.88-2.431-12.555-3.039-17.176-.425-3.236-.673-5.094-.84-5.655-.35-1.176-1.83-2.176-3.295-2.232-1.22-.06-2.22.56-2.698 1.638-.894.995-.578 4.292.41 12.102.47 3.718 1.44 11.395.83 12.257-1.219-.133-3.31-4.942-6.215-14.299-.816-2.62-1.068-3.408-1.318-3.753-.494-1.202-2.172-2.129-3.676-2.024a3.183 3.183 0 00-.377.049c-.787.156-2.584.881-2.2 4.226 1.06 4.637 2.213 8.041 3.331 11.346l.023.066c.669 1.98 1.302 3.85 1.89 5.925 1.385 4.9.846 7.94.84 7.975-.046.312-.143.503-.288.57a.556.556 0 01-.195.045c-.44.03-1.098-.26-1.437-.45-.776-1.482-4.636-8.544-8.134-9.524l-.126-.037-.127.012c-1.283.121-2.226.606-2.803 1.441-.914 1.32-.535 3.002-.444 3.34l.052.12c.028.051 2.834 5.165 3.268 7.544.374 2.04 2.311 4.25 3.869 6.026l.064.073c.508.58.946 1.083 1.292 1.548 4.519 4.713 11.665 8.677 11.723 8.71.892.657 1.387 1.293 1.44 1.84a.798.798 0 01-.16.58l-.155.162.988.96 18.853-1.324.804-3.684c2.486-10.402 1.967-19.272 1.958-19.33.01-.327.706-3.483 1.266-6.033l.017-.065c1.117-5.08 2.505-11.4 2.772-13.803.116-1.028-.542-1.972-1.675-2.401z"/></svg></label>
<!-- Scissors -->
<input id='S' name='rps' type='radio'>
<label for='S' class="scissors">
<svg class="scissors svg" xmlns="http://www.w3.org/2000/svg" width="51" height="58">
<path class="scissors"
fill="#3B4262"
d="M13.971 25.702l6.012-8.415c-2.499-.415-7.088-.507-10.846 3.235C3.212 26.421.812 39.163.312 42.248L15.37 57.24c2.711-.232 14.713-1.827 26.279-13.34.122-.249 2.94-2.321.636-4.614-1.1-1.095-2.919-1.074-4.042.044-.572.57-1.461.577-2.021.02-.56-.557-.552-1.443.02-2.012l4.087-4.069c2.076-2.067.119-5.555-2.78-4.717l-3.345 2.851c-.611.53-1.52.439-2.022-.14-.519-.597-.408-1.503.183-2.013 11.687-10.208 9.98-8.979 17.5-15.995 2.809-2.329-.725-6.447-3.493-4.09L28.182 25.45c-.529.448-1.34.457-1.86-.02-.601-.517-.615-1.262-.222-1.85L38.787 3.944c1.854-2.5-1.795-5.277-3.749-2.757L16.28 27.307c-.452.65-1.364.8-1.985.345a1.377 1.377 0 01-.323-1.95z"/></svg></label>
</fieldset>
<button type='reset'>Reset</button>
</form>
My javascript animated SVG not working in WordPress. Can anybody help with the best practice of how to make an animated SVG work?
My first thought is - is it not working because of the security of having javascript inside an SVG file...
The file works as-is:
https://aau.gagarindigital.dk/wp-content/uploads/2021/07/stack-test-menu_3x.svg
My SVG file looks like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 912.83 882.07">
<defs>
<style>
:root {
--color-1: #F2B705;
--color-2: #C30F0E;
--color-3: #264ABA;
--color-4: #009CD2;
--color-5: #E25727;
--color-11: #C29204;
--color-22: #990B0B;
--color-33: #172E73;
--color-44: #006B8E;
--color-55: #BA4620;
}
#c1 {
fill: var(--color-1);
}
#c2 {
fill: var(--color-2);
}
#c3 {
fill: var(--color-3);
}
#c4 {
fill: var(--color-4);
}
#c5 {
fill: var(--color-5);
}
.cls-7 {
fill: #a1ac75;
}
circle:hover:not(.active) {
stroke: #999;
stroke-width: 11.5;
}
circle.active {
stroke: black;
stroke-width: 11.5;
}
line {
stroke: gold;
stroke-width: 4;
}
line.highlight {
stroke: black;
}
</style>
</defs>
<polygon id="fem-kant" class="cls-7" points="456.29 7.49 898.87 329.05 729.82 849.33 182.76 849.33 13.71 329.05 456.29 7.49"/>
<line class="c3 c5" x1="656.32" y1="748.57" x2="133.5" y2="368.62"/>
<line class="c2 c4" x1="258.55" y1="747.22" x2="779.33" y2="368.43"/>
<line class="c1 c4" x1="258.55" y1="747.22" x2="457.43" y2="133.5"/>
<line class="c1 c3" x1="457.43" y1="133.5" x2="657.03" y2="748.57"/>
<line class="c5 c2" x1="133.5" y1="368.62" x2="779.33" y2="368.43"/>
<line class="c1 c2" x1="779.33" y1="368.43" x2="457.43" y2="133.5"/>
<line class="c2 c3" x1="779.33" y1="368.43" x2="657.03" y2="748.57"/>
<line class="c3 c4" x1="258.55" y1="747.22" x2="657.03" y2="748.57"/>
<line class="c4 c5" x1="258.55" y1="747.22" x2="133.5" y2="368.62"/>
<line class="c5 c1" x1="133.5" y1="368.62" x2="457.43" y2="133.5"/>
<a href="#0">
<circle id="c1" cx="455.9" cy="133.5" r="133"/>
</a>
<a href="#0">
<circle id="c2" cx="779.33" cy="368.43" r="133"/>
</a>
<a href="#0">
<circle id="c3" cx="656.32" cy="748.57" r="133"/>
</a>
<a href="#0">
<circle id="c4" cx="256.18" cy="748.57" r="133"/>
</a>
<a href="#0">
<circle id="c5" cx="133.5" cy="368.62" r="133"/>
</a>
<script>
<![CDATA[
var allCircles = document.querySelectorAll("circle");
window.addEventListener('DOMContentLoaded', (event) => {
// Add an click handler to every circle that
// adds the class "active" to the clicked circle.
allCircles.forEach(element => {
element.addEventListener("click", clickHandler);
element.addEventListener("mouseover", mouseoverHandler);
element.addEventListener("mouseout", mouseoutHandler);
});
});
function clickHandler(evt) {
// Clear current selection (remove class "active" from any circle)
allCircles.forEach((circle) => circle.classList.remove("active"));
// Mark clicked circle selected
evt.target.classList.add("active");
// Clear any currently highlighted lines
clearHighlightedLines();
}
function mouseoverHandler(evt) {
let activeCircle = document.querySelector("circle.active");
let hoveredCircle = evt.target;
if (activeCircle && (activeCircle != hoveredCircle)) {
// Get the line that has classes matching both the actibve and hovered circle
let line = document.querySelector("line."+activeCircle.id+"."+hoveredCircle.id);
// Add the class "highlight" to that line
if (line)
line.classList.add("highlight");
}
}
function mouseoutHandler(evt) {
clearHighlightedLines();
}
function clearHighlightedLines() {
// Find the line with class "highlight" (if any)
var line = document.querySelector("line.highlight");
// Remove the class "highlight"
if (line)
line.classList.remove("highlight");
}
//]]>
</script>
</svg>
But the javascript is not working and the SVG file looks like this in WordPress:
https://aau.gagarindigital.dk/sample-page/
If the script should be outside the SVG file - can I link to the script placed at the root of the site. What would a link inside an SVG file look like?
I made a little mistake in my answer to your last question. The
var allCircles = document.querySelectorAll("circle");
part should be inside the DOMContentLoaded event. I believe that if you fix that, it will make a difference.
I've the below code, which is drawing a rec in a svg element:
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
I want to be able "prpgramatically" to:
Shift the location of the rec by changing the value of the from field
Chang the width of the rec by changing the value of the to field
const svgRect = document.querySelector('svg rect')
function xStart(XS){
svgRect.setAttribute('x',XS)
}
function rWidth(RW){
svgRect.setAttribute('width',RW)
}
.container
{
display: flex;
align-items: center;
height: 1.3em;
}
<div class="container">
<label for="from">From:</label>
<input onchange="xStart(this.value)" type="number" name="from">
<label for="to">To:</label>
<input onchange="rWidth(this.value)" type="number" name="to">
<svg margin="0" width="200" height="1.3em">
<rect x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
For changing width, you can add even listeners to mouse position and situations, below sample code:
let svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("class", "octicon octicon-star");
// svg.setAttribute("viewBox", "0 0 14 16");
svg.setAttribute("version", "1.1");
svg.setAttribute("width", 240);
svg.setAttribute("height", 160);
svg.setAttribute("aria-hidden", "true");
let barThickness = 20
let orders = [100, 152];
//orders.forEach((element, index, array) => console.log('a[' + index + '] = ' + element) )
orders.forEach(function(element, index, array) {
console.log('a[' + index + '] = ' + element)
let r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
r.setAttribute("x", 0);
r.setAttribute("y",(barThickness+10)*index+0);
r.setAttribute("width", element);
r.setAttribute("height", barThickness);
r.setAttribute("fill","black");
let isDrawing = false;
let x = element
let mousePosition = 0
r.addEventListener('mouseenter', e => {
e.path[0].setAttribute("fill","red")
});
r.addEventListener('mouseleave', e => {
e.path[0].setAttribute("fill","black")
if (isDrawing === true) {
isDrawing = false;
}
});
r.addEventListener('mousedown', e => {
isDrawing = true;
});
r.addEventListener('mousemove', e => {
if (isDrawing === true) {
console.log(e.offsetX)
if(e.offsetX>mousePosition) {
x++
} else if(e.offsetX < mousePosition){
x--
}
mousePosition = e.offsetX
r.setAttribute("width", x)
}
});
r.addEventListener('mouseup', e => {
if (isDrawing === true) {
isDrawing = false;
}
});
svg.appendChild(r);
document.body.appendChild(svg)
} )
var startX = 100;
var startY = 100;
function init() {
Snap("#rect").drag(dragMove, dragStart, dragEnd);
}
function dragStart(x, y, evt) {
// figure out where the circle currently is
startX = parseInt(Snap("#rect").attr("x"), 10);
startY = parseInt(Snap("#rect").attr("y"), 0);
}
function dragMove(dx, dy, x, y, evt) {
Snap("#rect").attr({
x: (startX + dx),
y: (startY + dy)
});
}
function dragEnd(evt) {
// no action required
}
.container {
display: flex;
align-items: center;
height: 1.3em;
position:relative;
}
svg {
position: absolute;
top: 0;
left:420px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<body onload="init()">
<div class="container">
<label for="from">From:</label>
<input type="number" name="from">
<label for="to">To:</label>
<input type="number" name="to">
<svg margin="0" width="400" height="400">
<rect draggable="true" id='rect' x="10" y="0" width="30" height="1.3em" stroke="black" fill="green" />
</svg>
</div>
</body>
I need to place some html elements over my svg path. How can i do that ?
I looked up for foreignObject but it only allows for whole svg what about the path sections ?
Here is my svg code
<svg id="svg" width="50%" height="50%" fill="none" stroke="#000000" stroke-linejoin="round" enable_background="new 0 0 1000 589" pretty_print="False" version="1.1" viewBox="0 0 271.87 232.08" xmlns="http://www.w3.org/2000/svg">
<g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".97063">
<path d="m109.29 15.045 0.2913-7.5709-3.106-0.0971-21.451-0.97063-21.548-1.3589-48.92-4.2708-3.009-0.29119-0.38825 3.4943-7.2797 75.127-0.67944 7.0856-2.7178 28.634 0.38826 0.0971 13.395 1.2618 1.2618-6.7944 2.4266-1.9413 27.178 2.4266h0.19413l-2.4266-4.7561 12.327 0.87357 30.769 1.7471 19.218 0.87357 3.3002-91.045 0.67944 0.0971 0.0971-2.6207z" data-id="NM" data-name="New Mexico"/>
<path d="m246.35 13.201-0.19413-2.6207-0.0971-2.5236-0.19413-2.5236-3.6884 0.29119-37.563 1.7471-52.705 0.77651-22.519-0.29119-4.1737-0.0971h-1.553l-6.115-0.19413-1.9413-0.0971-4.0766-0.0971-1.9413-0.0971-0.2913 7.5709-0.0971 2.6207h0.58238l23.489 0.58238 24.848 0.29119 0.29119 33.196 1.7471 5.8238 3.8825 3.6884 4.1737 0.19413 0.87356-1.7471 5.7267 5.2414 7.4739 0.7765 1.3589 1.553 2.7178-1.2618 6.7944 3.2031v1.8442l2.5236-0.0971 2.6207-2.2324 4.8532 3.106 4.562 1.6501 3.106-4.2708 9.9004 4.659 3.6884-3.009 3.009-1.1648 2.4266 0.58238 9.1239-2.6207 4.8532 2.0383 4.3678 2.8148 3.7855 0.67944h0.0971l-0.0971-4.3678-1.0677-26.401-0.0971-4.3678-3.7855-19.607-0.58238-2.7178-0.0971-2.5236z" data-id="OK" data-name="Oklahoma"/>
<path d="m210.82 227.22-4.659-17.568v3.3002zm-1.0677-30.866-3.3002 6.212-0.38825 2.0383zm2.6207-4.562 3.106-4.0767-2.2324 1.3589zm10.968-9.9004-7.2797 3.7855 2.0383-0.38825zm0.97063-1.3589 2.0383-1.6501-0.7765 0.19413zm-115.12-162.87-0.67944-0.0971-3.3002 91.045-19.218-0.87357-30.769-1.7471-12.327-0.87357 2.4266 4.7561 10.58 10.58 6.0179 7.0856 7.9592 5.9208 5.6297 10.289 2.1354 10.774 4.562 3.009 3.5913 3.9796 5.1443 1.8442 7.4739 4.7561 3.3972 1.2618 4.659-4.659 1.456-4.9502 2.4266-4.7561 7.5709-3.009 2.9119 1.4559 8.4445 0.67945 7.668 4.7561 5.2414 0.97063-1.456 2.7178 3.009 1.9413 2.8148 3.3972 0.58238 3.5913 1.8442 2.4266 4.2708 10.289 4.2708 3.5913 3.3002 5.4355 4.1737 4.2708 1.8442 0.58238 1.553 11.065 4.562 2.5236 0.19412 3.4943 1.1648-0.29119 7.9592 9.7063 3.9796 0.87357 5.0473 3.009h7.765l5.6297 3.106 6.6974-1.4559-3.009-2.8148-2.7178-8.1533-1.0677-7.0856-1.553-2.3295 0.67944-4.7561-2.0383-0.19413-2.7178-4.4649 3.106 3.3002 3.5913-1.2618 1.9413-5.1444-3.8825-5.2414 5.8238 0.67944 2.7178-4.1737-0.38825-1.456 2.4266-3.2031-0.58238 2.8148 2.7178-2.1354-1.0677-3.7855 3.4943 1.8442 4.4649-2.5236-4.3678-4.562 2.7178 1.0677 5.0473 0.29119 6.6003-1.456 7.3768-4.9502 4.4649-3.6884 0.67944-2.7178 2.7178-2.8148-1.456-4.659 0.29119-2.9119 4.8532-2.1354-0.38826 5.1444h2.9119l-3.2031 2.7178 12.909-6.7944 2.1354-0.0971 1.3589-6.212h0.38826l1.4559-3.5913 0.67944-11.065 0.87357-4.4649-2.5236-7.9592-3.106-5.4355-0.0971-2.6207-3.2031-4.4649-1.9413-18.733-0.0971-2.3295-0.19413-2.4266-0.58238-8.5416-5.8238 0.19413-1.456-1.553-0.29119-0.0971h-0.0971l-3.7855-0.67944-4.3678-2.8148-4.8532-2.0383-9.1239 2.6207-2.4266-0.58238-3.009 1.1648-3.6884 3.009-9.9004-4.659-3.106 4.2708-4.562-1.6501-4.8532-3.106-2.6207 2.2324-2.5236 0.0971v-1.8442l-6.7944-3.2031-2.7178 1.2618-1.3589-1.553-7.4739-0.7765-5.7267-5.2414-0.87356 1.7471-4.1737-0.19413-3.8825-3.6884-1.7471-5.8238-0.29119-33.196-24.848-0.29119-23.489-0.58238h-0.58238z" data-id="TX" data-name="Texas"/>
</g>
</svg>
You need to find the center of a path in pixels in a resizable svg element. For this you need:
to find the center of a path in svg units
convert the svg units in pixels
repeat on resize
Please read the comments on my code.
In my code the div #label is just a point. If you need to add text to the div you'll need to take in account the width and the height of the div.
// the values of the svg viewBox
svgVB = { x: 0, y: 0, w: 271.87, h: 232.08 };
//the bounding box for the path id="NM"
let BB = NM.getBBox();
//the center of the path in svg units
let center = {};
center.x = BB.x + BB.width / 2;
center.y = BB.y + BB.height / 2;
//the center of the path in html units
let htmlCenter = {};
// a function to get the position of the div
function positionDiv() {
//first get the size and the position of the svg element
let SVGClientRect = svg.getBoundingClientRect();
//calculate the htmlCenter x
htmlCenter.x = map(
center.x,
svgVB.x,
svgVB.w,
SVGClientRect.x,
SVGClientRect.x + SVGClientRect.width
);
//calculate the htmlCenter y
htmlCenter.y = map(
center.y,
svgVB.y,
svgVB.h,
SVGClientRect.y,
SVGClientRect.y + SVGClientRect.height
);
// set the styles for the label
label.style.left = htmlCenter.x + "px";
label.style.top = htmlCenter.y + "px";
}
//call the positionDiv function
positionDiv();
//call the positionDiv function on resize
window.setTimeout(function() {
positionDiv();
window.addEventListener("resize", positionDiv, false);
}, 15);
function map(n, a, b, _a, _b) {
let d = b - a;
let _d = _b - _a;
let u = _d / d;
return _a + n * u;
}
svg {
border: 1px solid;
}
#label {
width: 5px;
height: 5px;
border-radius: 50%;
background: red;
position: absolute;
}
<svg id="svg" width="50%" height="50%" fill="none" stroke="#000000" stroke-linejoin="round" enable_background="new 0 0 1000 589" pretty_print="False" version="1.1" viewBox="0 0 271.87 232.08" xmlns="http://www.w3.org/2000/svg">
<g fill="#f9f9f9" fill-rule="evenodd" stroke-width=".97063">
<path d="m109.29 15.045 0.2913-7.5709-3.106-0.0971-21.451-0.97063-21.548-1.3589-48.92-4.2708-3.009-0.29119-0.38825 3.4943-7.2797 75.127-0.67944 7.0856-2.7178 28.634 0.38826 0.0971 13.395 1.2618 1.2618-6.7944 2.4266-1.9413 27.178 2.4266h0.19413l-2.4266-4.7561 12.327 0.87357 30.769 1.7471 19.218 0.87357 3.3002-91.045 0.67944 0.0971 0.0971-2.6207z" id="NM" data-name="New Mexico"/>
<path d="m246.35 13.201-0.19413-2.6207-0.0971-2.5236-0.19413-2.5236-3.6884 0.29119-37.563 1.7471-52.705 0.77651-22.519-0.29119-4.1737-0.0971h-1.553l-6.115-0.19413-1.9413-0.0971-4.0766-0.0971-1.9413-0.0971-0.2913 7.5709-0.0971 2.6207h0.58238l23.489 0.58238 24.848 0.29119 0.29119 33.196 1.7471 5.8238 3.8825 3.6884 4.1737 0.19413 0.87356-1.7471 5.7267 5.2414 7.4739 0.7765 1.3589 1.553 2.7178-1.2618 6.7944 3.2031v1.8442l2.5236-0.0971 2.6207-2.2324 4.8532 3.106 4.562 1.6501 3.106-4.2708 9.9004 4.659 3.6884-3.009 3.009-1.1648 2.4266 0.58238 9.1239-2.6207 4.8532 2.0383 4.3678 2.8148 3.7855 0.67944h0.0971l-0.0971-4.3678-1.0677-26.401-0.0971-4.3678-3.7855-19.607-0.58238-2.7178-0.0971-2.5236z" id="OK" data-name="Oklahoma"/>
<path d="m210.82 227.22-4.659-17.568v3.3002zm-1.0677-30.866-3.3002 6.212-0.38825 2.0383zm2.6207-4.562 3.106-4.0767-2.2324 1.3589zm10.968-9.9004-7.2797 3.7855 2.0383-0.38825zm0.97063-1.3589 2.0383-1.6501-0.7765 0.19413zm-115.12-162.87-0.67944-0.0971-3.3002 91.045-19.218-0.87357-30.769-1.7471-12.327-0.87357 2.4266 4.7561 10.58 10.58 6.0179 7.0856 7.9592 5.9208 5.6297 10.289 2.1354 10.774 4.562 3.009 3.5913 3.9796 5.1443 1.8442 7.4739 4.7561 3.3972 1.2618 4.659-4.659 1.456-4.9502 2.4266-4.7561 7.5709-3.009 2.9119 1.4559 8.4445 0.67945 7.668 4.7561 5.2414 0.97063-1.456 2.7178 3.009 1.9413 2.8148 3.3972 0.58238 3.5913 1.8442 2.4266 4.2708 10.289 4.2708 3.5913 3.3002 5.4355 4.1737 4.2708 1.8442 0.58238 1.553 11.065 4.562 2.5236 0.19412 3.4943 1.1648-0.29119 7.9592 9.7063 3.9796 0.87357 5.0473 3.009h7.765l5.6297 3.106 6.6974-1.4559-3.009-2.8148-2.7178-8.1533-1.0677-7.0856-1.553-2.3295 0.67944-4.7561-2.0383-0.19413-2.7178-4.4649 3.106 3.3002 3.5913-1.2618 1.9413-5.1444-3.8825-5.2414 5.8238 0.67944 2.7178-4.1737-0.38825-1.456 2.4266-3.2031-0.58238 2.8148 2.7178-2.1354-1.0677-3.7855 3.4943 1.8442 4.4649-2.5236-4.3678-4.562 2.7178 1.0677 5.0473 0.29119 6.6003-1.456 7.3768-4.9502 4.4649-3.6884 0.67944-2.7178 2.7178-2.8148-1.456-4.659 0.29119-2.9119 4.8532-2.1354-0.38826 5.1444h2.9119l-3.2031 2.7178 12.909-6.7944 2.1354-0.0971 1.3589-6.212h0.38826l1.4559-3.5913 0.67944-11.065 0.87357-4.4649-2.5236-7.9592-3.106-5.4355-0.0971-2.6207-3.2031-4.4649-1.9413-18.733-0.0971-2.3295-0.19413-2.4266-0.58238-8.5416-5.8238 0.19413-1.456-1.553-0.29119-0.0971h-0.0971l-3.7855-0.67944-4.3678-2.8148-4.8532-2.0383-9.1239 2.6207-2.4266-0.58238-3.009 1.1648-3.6884 3.009-9.9004-4.659-3.106 4.2708-4.562-1.6501-4.8532-3.106-2.6207 2.2324-2.5236 0.0971v-1.8442l-6.7944-3.2031-2.7178 1.2618-1.3589-1.553-7.4739-0.7765-5.7267-5.2414-0.87356 1.7471-4.1737-0.19413-3.8825-3.6884-1.7471-5.8238-0.29119-33.196-24.848-0.29119-23.489-0.58238h-0.58238z" id="TX" data-name="Texas"/>
</g>
</svg>
<div id="label"></div>
You need to add an id to your path
<path id="my-text" .......... />
aftet that, inside your svg tags put:
<text>
<textPath xlink:href="#text">text on a path</textPath>
</text>
you use the same id you used for that path in the href=""
Hope this helps!
this article also may help you out! https://vanseodesign.com/web-design/svg-text-on-a-path-part-1/
for putting elements in your svg:
The only way i found was using <foreignObject>
example:
<svg>
....
....
<foreignObject>
<div> your content</div>
</foreignObject>
</svg>
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject this article can you more about that. There are ways yo position with x and y attributes.
I can get this working successfully within the html body, example...
<div id="myContainer" style="float: left; background-color: Blue; height: 100px;
width: 100px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%">
<defs>
<lineargradient id="myLinearGradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop id="start" offset="50%" style="stop-color: White; stop-opacity: 1" />
<stop id="stop" offset="60%" style="stop-color: #99cd9f; stop-opacity: 1" />
</lineargradient>
</defs>
<circle cx="50px" cy="50px" r="50px" fill="url(#myLinearGradient)" />
</svg>
</div>
However, I need to create this dynamically using javascript. Creating just the circle works fine, it's when I point the circle's Fill to the lineargradient it fails - I just get a black circle.
I think I'm not setting the stop 'style' attribute correctly. I have tried an alternative way to no avail, see below...
I'm using Chrome, and thanks in advance!
Within the body tages:
<body>
<div style="float: left; background-color: Blue; height: 100px;
width: 100px;">
<svg id="Svg1" xmlns="http://www.w3.org/2000/svg">
<defs id="mydefs">
</defs>
</svg>
</div>
</body>
My script:
<script>
// lineargradient
var myLinearGradient = document.createElementNS("http://www.w3.org/2000/svg", "lineargradient");
myLinearGradient.setAttribute("id", "myLGID");
myLinearGradient.setAttribute("x1", "0%");
myLinearGradient.setAttribute("x2", "0%");
myLinearGradient.setAttribute("y1", "0%");
myLinearGradient.setAttribute("y2", "100%");
document.getElementById("mydefs").appendChild(myLinearGradient);
//stops
var stop1 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop1.setAttribute("id", "myStop1");
stop1.setAttribute("offset", "70%");
//stop1.setAttribute("style", "stop-color: White; stop-opacity: 1");
stop1.setAttribute("stop-color", "White");
document.getElementById("mydefs").appendChild(stop1);
var stop2 = document.createElementNS("http://www.w3.org/2000/svg", "stop");
stop2.setAttribute("id", "myStop2");
stop2.setAttribute("offset", "80%");
//stop2.setAttribute("style", "stop-color: #99cd9f; stop-opacity: 1");
stop2.setAttribute("stop-color", "#99cd9f");
document.getElementById("mydefs").appendChild(stop2);
// Circle
var myCircle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
myCircle.setAttribute("id", "idCircle");
myCircle.setAttribute("cx", "50px");
myCircle.setAttribute("cy", "50px");
myCircle.setAttribute("r", "50px");
myCircle.setAttribute("fill", "url(#myLGID)");
document.getElementById("Svg1").appendChild(myCircle);
</script>
Two things:
The element name for linear gradients is linearGradient, not lineargradient.
You have to append the stops to the linearGradient element, not the defs element.
See this codepen for an MIT-licensed example:
// Store the SVG namespace for easy reuse.
var svgns = 'http://www.w3.org/2000/svg';
// Create <svg>, <defs>, <linearGradient> and <rect> elements using createElementNS to apply the SVG namespace.
// (https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS)
var svg = document.createElementNS(svgns, 'svg');
var defs = document.createElementNS(svgns, 'defs');
var gradient = document.createElementNS(svgns, 'linearGradient');
var rect = document.createElementNS(svgns, 'rect');
// Store an array of stop information for the <linearGradient>
var stops = [
{
"color": "#2121E5",
"offset": "0%"
},{
"color": "#206DFF",
"offset": "100%"
}
];
// Parses an array of stop information and appends <stop> elements to the <linearGradient>
for (var i = 0, length = stops.length; i < length; i++) {
// Create a <stop> element and set its offset based on the position of the for loop.
var stop = document.createElementNS(svgns, 'stop');
stop.setAttribute('offset', stops[i].offset);
stop.setAttribute('stop-color', stops[i].color);
// Add the stop to the <lineargradient> element.
gradient.appendChild(stop);
}
// Apply the <lineargradient> to <defs>
gradient.id = 'Gradient';
gradient.setAttribute('x1', '0');
gradient.setAttribute('x2', '0');
gradient.setAttribute('y1', '0');
gradient.setAttribute('y2', '1');
defs.appendChild(gradient);
// Setup the <rect> element.
rect.setAttribute('fill', 'url(#Gradient)');
rect.setAttribute('width', '100%');
rect.setAttribute('height', '100%');
// Assign an id, classname, width and height
svg.setAttribute('width', '100%');
svg.setAttribute('height', '100%')
svg.setAttribute('version', '1.1');
svg.setAttribute('xmlns', svgns);
// Add the <defs> and <rect> elements to <svg>
svg.appendChild(defs);
svg.appendChild(rect);
// Add the <svg> element to <body>
document.body.appendChild(svg);