Can I generate SVG with js? - javascript

I'm looking for a way to generate the following SVG with javascript.
I honestly have no idea on how to do it, neither I know if it's possible!
Since this is for an university project, I'm only allowed to use pure javascript, with no libraries.
EDIT: if it can help, I also have the .svg file. I can't use .png because I need to animate 2 elements within it.
<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 225.5 225.5" style="enable-background:new 0 0 225.5 225.5;" xml:space="preserve">
<path id="Luna1" class="st0" d="M112.8,225.5C50.5,225.5,0,175,0,112.8S50.5,0,112.8,0V225.5z"/>
<path id="Luna2" class="st1" d="M112.8,0C175,0,225.5,50.5,225.5,112.8S175,225.5,112.8,225.5V0z"/>
<circle id="Cerchio1" class="st2" cx="46.4" cy="112.8" r="18.4"/>
<circle id="Cerchio2" class="st2" cx="179.1" cy="112.8" r="18.4"/>
</svg>
<style type="text/css">
.st0{fill:#6DC06B;}
.st1{fill:#0B7660;}
.st2{fill:#17AF80;}
svg {
width: 200px;
height: 200px;
cursor: pointer;
transform: rotate(45deg);
}
.st2 {
-webkit-transition: 1s ease-in-out;
-moz-transition: 1s ease-in-out;
-o-transition: 1s ease-in-out;
transition: 1s ease-in-out;
}
</style>
Here's the full code that includes the animationon Fiddle!
I would really appreciate any help! Thank you in advance!
Let me know if you need any further details!

You can create nodes and add them to an SVG element like this:
// store namespace
let ns = "http://www.w3.org/2000/svg"
// create svg element
let svg = document.createElementNS(ns, "svg")
document.body.appendChild(svg)
// set width and height
svg.setAttribute("width", "100")
svg.setAttribute("height", "100")
// just an example to create a path
let path = document.createElementNS(ns, "path")
path.setAttributeNS(null, "stroke-width", 2)
path.setAttributeNS(null, "d", "M300 200 m-10.292521287196118 -2.2297708853450806 l-8.789109120138724 -1.6054377906297648")
// add the path to the svg
svg.appendChild(path)
EDIT
Added option to create the SVG tag as well.

Related

Text is translated downward when rotated

I am createing a reset button for a sumulation as part of a web app. when you click the button it spins the reset icon. To do this I am using transform rotate to spin a text element, but when I spin it it it ends up lower than when it started. I have no idea why this is happening but googling the answer has got me nowhere.
any help is appreciated thx.
keyframes:
#keyframes spin360 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
I call the keyframes in javascript using this function:
function spin() {
document.getElementById("resetButtonSvg").style.animation = "spin360 0.5s ease forwards";
}
*note it is called resetButtonSvg because I was planning to use an SVG but instead I ended up using Unicode.
just change your html to something like this
<button onclick="spin()">
<?xml version="1.0" encoding="iso-8859-1"?>
<svg version="1.1" id="resetButtonSvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 179.019 179.019" style="enable-background:new 0 0 179.019 179.019;" xml:space="preserve">
<g>
<g>
<path style="fill:#010002;" d="M138.121,138.357c-13.02,13.008-30.312,20.174-48.714,20.174c-37.955,0-68.84-30.867-68.876-68.81
l14.046,14.064c0.931,0.925,2.429,0.925,3.359,0c0.919-0.931,0.919-2.434,0-3.359L19.315,81.797L0.698,100.426
c-0.931,0.925-0.931,2.429,0,3.359c0.459,0.465,1.068,0.692,1.671,0.692c0.615,0,1.223-0.233,1.677-0.692l11.826-11.832
c1.235,39.531,33.689,71.328,73.512,71.328c19.673,0,38.164-7.661,52.079-21.57c0.925-0.925,0.925-2.429,0-3.353
C140.562,137.426,139.052,137.426,138.121,138.357z"/>
<path style="fill:#010002;" d="M178.32,75.234c-0.919-0.925-2.423-0.925-3.353,0L163.152,87.06
c-1.247-39.531-33.701-71.322-73.518-71.322c-19.685,0-38.17,7.661-52.085,21.57c-0.931,0.925-0.931,2.429,0,3.353
c0.919,0.931,2.429,0.931,3.353,0c13.014-13.008,30.312-20.174,48.714-20.174c37.949,0,68.84,30.861,68.888,68.81l-14.058-14.064
c-0.925-0.925-2.429-0.925-3.359,0c-0.919,0.931-0.919,2.434,0,3.359l18.623,18.623l18.617-18.623
C179.251,77.668,179.251,76.164,178.32,75.234z"/>
</g>
</g>
</svg>
</button>
and also apply this css on the button and the svg
button {
display: flex;
align-items: center;
padding: 10px;
}
svg {
width: 25px;
height: 25px;
}

Hover functionality not working on svg path

I'm trying to get a :hover functionality on my svg path. In short, I want my path to fill with red when hovered over.
my CSS has:
.node_hover {
/* fill-opacity: 1;
fill: crimson;
transition: 0.3s; */
fill-opacity: 0;
}
.node_hover:hover {
fill-opacity: 1;
fill: black;
transition: 0.3s;
}
and my svg is
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g className = "node_hover">
<path id="Imported Path .... />
</g>
</svg>
However nothing happens upon hover. I tried giving the className to my path itself but that doesn't work. either.
Any help would be appreciated.
I think the issue is a typo. className should be class
.node_hover {
fill: black;
transition: 0.3s;
}
.node_hover:hover {
fill: red;
transition: 0.3s;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3269 4220" cursor = "pointer" pointerEvents = "all">
<g class = "node_hover">
<path d="M150 0 L75 200 L225 200 Z" />
</g>
</svg>

Animate scale rotate svg element

Assuming I have an svg made with inkscape.
In this SVG set with a viewbox, I want to animate each element inside the SVG.
There is no problem for translate or opacity ... but when I need to rotate or scale a single element, it acting weird.
I try to correctly understand the concept of the viewbox but I need some help.
I understand that I have only one origin point when I have only one viewbox should I set multiple viewbox ?
<?xml version="1.0" encoding="UTF-8"?>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
// rotate or scale acting weird
<ellipse id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
// rotate or scale acting weird
<rect id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
// rotate or scale acting weird
<path id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;paint-order:normal"/>
</svg>
I'm using anime.js 3.0 or CSS or I can try anything else
In Svg, the coordinates of any figure always have an absolute value that is calculated from the upper left corner of the SVG canvas.
Therefore, when applying the scale (2) command, the coordinates of the center of the figure will also be doubled and the figure will shift to the right and down.
<svg id="SVGRoot" version="1.1" width="500" height="500" viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" style="border:1px solid grey;">
<rect id="rect9240" transform="scale(2)" x="100" y="100" width="100" height="100" style="fill-rule:evenodd;fill:#f00;> stroke:#000; paint-order:normal">
<animateTransform
xlink:href="#rect9240"
attributeName="transform"
type="scale"
values="1;2;2;1;1"
dur="8s"
fill="freeze"
repeatcount="indefinite"
/>
</rect>
<circle cx="150" cy="150" r="3" fill="black" />
<circle cx="300" cy="300" r="3" fill="dodgerblue" />
<text x="150" y="140" font-size="16px" text-anchor="middle" > Center (150,150) </text>
<text x="300" y="290" font-size="16px" text-anchor="middle" > Center (300,300) </text>
</svg>
To return the enlarged figure to its original position, you must use the command translate (X, Y)
There is a great post here by #Paul LeBeau where this is explained in detail.
CSS solution
In order not to calculate the position of the center of the figure, you can use the CSS rule transform-box: fill-box
When the value of the fill-box attribute is selected
The object bounding box is used as the reference box.
Below is an example of increasing and decreasing the size of figures:
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: scale 3s linear infinite alternate;
animation-direction: alternate;
transform-origin:50% 50%;
}
#keyframes scale {
0% { transform: scale(0.5); }
100% { transform: scale(1); }
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
Rotation example
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: spin 4s linear infinite alternate;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
Increase and rotation
svg {
width:50%;
}
.ellipse1, .rect1, .path1 {
transform-box: fill-box;
animation: scale1 4s linear, spin 4s linear 4s infinite alternate;
transform-origin:50% 50%;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#keyframes scale1 {
0% { transform: scale(0.5);}
100% { transform: scale(1);}
}
<svg id="SVGRoot" version="1.1" viewBox="0 0 700 500" xmlns="http://www.w3.org/2000/svg">
<ellipse class="ellipse1" id="path9238" cx="332.91" cy="143.85" rx="64.941" ry="67.676" style="fill-rule:evenodd;fill:#f00;stroke:#000"/>
<rect class="rect1" id="rect9240" x="400.59" y="270.31" width="173.63" height="177.73" style="fill-rule:evenodd;fill:#f00; stroke:#000; paint-order:normal"/>
<path class="path1" id="path9242" d="m233.79 453.52-153.64-138.25 196.55-63.937z" style="fill-rule:evenodd;fill:#f00;stroke:#000; paint-order:normal"/>
</svg>
I guess you mean the transform-origin CSS propierty. It is related to the center point of the svg file. Then, you need to calculate the center point of the element to animate related to document's center point.
For the animations you can use CSS animations.
The basics of viewBox is that the 4 numbers are "x y width height”. Generally the x/y coordinates are 0 which keeps your origin in the top left corner. Something people often do is place the origin in the middle.
In order to do that you move your viewBox top left by half of the width and half the height. In your case "-350 -250 700 500".

How to animate svg path with jQuery/JavaScript?

I'd like to animate an svg's path. I know this can be achieved with <animate>, but the animation starts only after the element is appended to some div. So I need to find another solution, but I weren't able to find any help online.
Here is the fiddle so you can take a look at what I have.
Note: Now I'd like the svg's path to stretch the svg. So at first, it is a triangle, but it needs to smoothly convert into a square that fits the svg around it.
Thank you!
// -- click the path -- //
$('path').on('click touch', function() {
$(this).parents('svg').css({
height: '100vh',
width: '100vw'
});
})
/* -- click the path -- */
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden; /* -- just for this example */
}
svg {
-webkit-transition:
height 350ms ease-in-out,
width 350ms ease-in-out;
transition:
height 350ms ease-in-out,
width 350ms ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- click the path -->
<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
<path d="M0 0 L405 0 L405 635"/>
</svg>
SMIL animations (ie. ones using <animate>) can be made to start on a click.
<svg fill="#000" xmlns="http://www.w3.org/2000/svg" version="1.0" height="200" width="200" viewBox="0 0 1024 1024">
<path d="M0 0 L405 0 L405 635 L405 635">
<animate attributeName="d" dur="350ms" to="M0 0 L405 0 L405 635 L0 635"
begin="click" fill="freeze" />
</path>
</svg>

SVG "circle" element radius attribute "r" does not transition in Firefox but does just fine in Chrome

I'm trying to make an SVG circle bigger on a click event and it works just fine in Chrome 52 (haven't tried it on older versions) but in Firefox the CSS transition has no effect. Is there a way to make Firefox behave the same way as Chrome without too much JavaScript?
HTML:
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle cx="50%" cy="50%" r="15"/>
</svg>
CSS:
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
circle {
-webkit-transition: ease 0.7s all;
-moz-transition: ease 0.7s all;
-ms-transition: ease 0.7s all;
-o-transition: ease 0.7s all;
transition: ease 0.7s all;
}
JS:
$(document).ready(function() {
$("body").click(function() {
if($("circle").attr("r") == 15) {
$("circle").attr("r", function() {
if ($(window).height() > $(window).width()) {
return Math.sqrt(Math.pow($(window).width(), 2) + Math.pow($(window).height(), 2));
}
return (Math.sqrt(Math.pow($(window).width(), 2) + Math.pow($(window).height(), 2)));
});
} else {
$("circle").attr("r", 15);
}
});
});
https://jsfiddle.net/xgscn4f1/
In SVG 1.1, which is the current standard, only certain attributes can by styled with CSS. The list of those properties can be found here:
SVG 1.1 property index
Note that r is not in this list.
In the upcoming SVG2 standard, most attributes will be stylable. But browsers have only just started to implement SVG2 features. Right now you can modify and transition r in Chrome, but not yet in other browsers.
You will need to use another technique to animate r. Either using SVG SMIL animation, or use one of the various SVG JS libraries that have animation functions.
You can animate any attributes of SVG elements easy with pure JS, including radius of circle, just give ID to element:
var c1 = document.getElementById("c1");
var strokeLength = 300;
c1.setAttribute("stroke-dasharray", "" + (strokeLength) + " 700");
function changeR(el) {
var n1 = 0;
var ch1 = 1;
var elT = setInterval(elTF, 5);
function elTF() {
el.setAttribute("r", n1);
if (n1 == 0) {
ch1 = 1;
} else if (n1 == 100) {
ch1 = -1;
}
n1 += ch1;
}
}
changeR(c1);
<svg width="250" height="200">
<circle id="c1" cx="100" cy="100" r="50" fill="transparent" stroke="blue" stroke-width="10" stroke-linecap="butt" stroke-dasharray="300 500" />
</svg>
Can animate stroke length too, via "stroke-dasharray" attribute, first parameter, second is for empty space.

Categories

Resources