I'm new at coding.
I'm studying the way to make an animated portfolio like Sean Halpin or Stephanie Walter one. I want to put a face, in which, blinking eyes and a moving the mouth would be the animated elements. Basically, I want to play with the visibility of the closed eyes and open mouth. As an example, I drew a face as follows:
<svg id="Capa_1" data-name="Capa 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 429 429">
<defs>
<style>
.cls-1 {
fill: #fff;
}
.cls-2 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
}
</style>
</defs>
<g id="face">
<path class="cls-1" d="M611,608.5a214,214,0,1,1,151.32-62.68A212.6,212.6,0,0,1,611,608.5Z" transform="translate(-396.46 -180)" />
<path d="M611,181a212.9,212.9,0,1,1-83.1,16.78A212.11,212.11,0,0,1,611,181m0-1c-118.46,0-214.5,96-214.5,214.5S492.5,609,611,609s214.5-96,214.5-214.5S729.43,180,611,180Z" transform="translate(-396.46 -180)" />
</g>
<g id="eyes">
<g id="eye_r">
<circle class="cls-1" cx="319.15" cy="128.63" r="48.5" />
<path d="M715.61,260.62a48,48,0,1,1-48,48,48.06,48.06,0,0,1,48-48m0-1a49,49,0,1,0,49,49,49,49,0,0,0-49-49Z" transform="translate(-396.46 -180)" />
</g>
<g id="iris_r">
<circle cx="319.15" cy="128.63" r="19" />
</g>
<g id="eye_l">
<circle class="cls-1" cx="109.85" cy="128.63" r="48.5" />
<path d="M506.32,260.62a48,48,0,1,1-48,48,48.06,48.06,0,0,1,48-48m0-1a49,49,0,1,0,49,49,49,49,0,0,0-49-49Z" transform="translate(-396.46 -180)" />
</g>
<g id="iris_l">
<circle cx="109.85" cy="128.63" r="19" />
</g>
<line id="closed_eye_l" class="cls-2" x1="62.04" y1="128.5" x2="158.04" y2="128.5" />
<line id="closed_eye_r" class="cls-2" x1="270.69" y1="128.23" x2="366.69" y2="128.23" />
</g>
<g id="closed_mouth">
<ellipse cx="214.5" cy="309" rx="108.5" ry="11.5" />
<path d="M611,478c29.08,0,56.41,1.25,77,3.51,30.68,3.38,31,7.32,31,7.49s-.35,4.11-31,7.49C667.37,498.75,640,500,611,500s-56.41-1.25-77-3.51c-30.69-3.38-31-7.32-31-7.49s.35-4.11,31-7.49c20.55-2.26,47.88-3.51,77-3.51m0-1c-60.2,0-109,5.37-109,12s48.8,12,109,12,109-5.37,109-12-48.8-12-109-12Z" transform="translate(-396.46 -180)" />
</g>
</svg>
So, I thought three ways to do this:
Place the svg inside an tag, calling then a function that takes into consideration the loading of the file. An example of what I'm saying is found in the following resource: https://www.petercollingridge.co.uk/tutorials/svg/interactive/javascript/, in the "External SVG + External JavaScript" part. It didn't work. The contentDocument ALWAYS returns "null".
In my example, it would be:
HTML:
<object id="face" data="path/to/face.svg" type="image/svg+xml"></object>
JS:
<script type="text/javascript">
window.addEventListener("load", function() {
var svgObject = document.getElementById('face').contentDocument;
var svg = svgObject.getElementById('closed_eye_r');
svg.style.visibility="hidden";
});
</script>
Inline SVG - call a "transform" property. Sean Halpin does it but I'm not sure what he does.
HTML: https://www.seanhalpin.design/
JS: https://www.seanhalpin.design/js/scripts.js
Inline SVG, use getElementById and apply functions to animate the internal parts of the SVG file.
Questions:
a. Is Inline SVG a good practice?
b. Which is the best way to animate an SVG?
I hope to have been clear. Let me know if something is not well presented, I want to learn to edit questions in order to make them as clear as possible.
Thanks!
I have the following html and get strange results with getBoundingClientRect, if there are svg elements inside:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body>
<svg>
<g transform="translate(10,10) scale(1)">
<g class="nodes">
<g style="inline" transform="translate(20,20)">
<rect style="stroke: rgb(170, 170, 170); stroke-width: 1; fill: rgb(248, 248, 248);" width="100" height="90"></rect>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(182, 204, 216); stroke-width: 0;" x="0" y="0" height="20" width="100"></rect>
<text class="nodetext" x="3" y="15">Text 1</text>
</g>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(221, 185, 172); stroke-width: 0;" x="0" y="22" height="20" width="100"></rect>
<text class="nodetext" x="3" y="37">Test 2</text>
</g>
<g class="nodeparent">
<rect class="noderect" style="fill: none; stroke: rgb(221, 185, 180); stroke-width: 0;" x="0" y="44" height="20" width="100"></rect>
<text class="nodetext" x="3" y="59">Test 3</text>
</g>
<g class="nodebox">
<rect class="noderect" style="fill: rgb(236, 163, 154); stroke: rgb(212, 139, 130); stroke-width: 2;" x="0" y="66" height="20" width="100"></rect>
<text class="nodetext" x="3" y="81">Test 4</text>
<g class="nodeicon">
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" x="80" y="68">
<rect height="14" width="14" y="1" x="1" stroke="#888888" stroke-width="1" fill="#ffffff" fill-opacity="0.5"></rect>
<line x1="4" y1="8" x2="12" y2="8" stroke="#888888" stroke-width="2"></line>
</svg>
</g>
</g>
</g>
</g>
</g>
</svg>
</body>
</html>
I get a much greater rectangle than I would expect in Firefox.
When I inspect the objects, the displayed bounding box for the inner svg element is fine, but the surrounding g element (class nodeicon) is outside.
If I remove this g element, the next surrounding g element is outside.
The following picture shows this:
It looks like the offset of the svg is applied twice.
Is getBoundingClientRect the correct way to get the position and size of elements (e.g. the g element with class nodes) for this? Is there something wrong with the HTML or svg element or did I run into a Firefox bug?
I am using the current version of Firefox (58.0 64bit).
A problem that you have here is that the svg tag nested inside the g tag (.nodeicon) is starting a new viewport context. Strictly speaking it should not be nested inside a g tag anyway, but regardless, it isn't really necessary as you're using it as a method of grouping the two elements inside it - which is the purpose of the g tag.
Try removing the svg tag nested inside .nodeicon, and move the coordinates in that svg's x and y attributes to a transform attribute on the g tag.
i.e:
<g class="nodeicon" transform="translate(80, 68)">
<rect height="14" width="14" y="1" x="1" stroke="#888888" stroke-width="1" fill="#ffffff" fill-opacity="0.5"></rect>
<line x1="4" y1="8" x2="12" y2="8" stroke="#888888" stroke-width="2"></line>
</g>
Suppose i have an svg element like so
<svg id="svgCanvas" class="pan" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
<g id="viewport">
//Filled with an arbitrary amount of lines and cirles - examples below.
<line x1="632" y1="357.5" x2="682" y2="270.89745962155615" class="line" style="stroke: rgb(128, 128, 128); stroke-width: 1.3px;"></line>
<circle cx="82.08376766398476" cy="367.0988235405059" r="16.5" stroke="blue" fill="white" class="circle"></circle>
</g>
</svg>
how would i go about clearing everything from the that group, whilst also keeping the group element itself?
Just using DOM methods without the need for any framework you could go for:
var el = document.getElementById("viewport");
while (el.firstChild) {
el.removeChild(el.firstChild);
}
document.addEventListener('load', function(){
document.getElementById("viewport").innerHTML = "";
});
I have the following code for an svg:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="470px" height="260px" version="1.1" onload="addEvents()" xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
<image xlink:href="baby.jpg" x="0" y="0" height="260px" width="470px">
</image>
<g transform="translate(100,50)">
<circle class="circle" id="tip1" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" />
<g transform="translate(10,15)">
<polygon class="baby-tip tip1 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" />
</g>
<rect class="baby-tip tip1" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/>
<text class="baby-tip tip1" x="10" y="45">Here is a whole bunch of text.</text>
<text class="baby-tip tip1" x="10" y="60">Clearly this should wrap, but it</text>
<text class="baby-tip tip1" x="10" y="75">doesn't. What will we do?</text>
</g>
<g transform="translate(150,160)">
<circle class="circle" id="tip2" cx="20" cy="0" r="10" stroke="" stroke-width="0" fill="rgb(143, 124, 184)" />
<g transform="translate(10,15)">
<polygon class="baby-tip tip2 arrow" points="0,10 10,0, 20,10" style="fill: rgb(143, 124, 184)" />
</g>
<rect class="baby-tip tip2" x="0" y="25" height="70" width="220" rx="5" ry="5" style="fill: rgb(143, 124, 184)"/>
<text class="baby-tip tip2" x="10" y="45">Here is a whole bunch of text.</text>
<text class="baby-tip tip2" x="10" y="60">Clearly this should wrap, but it</text>
<text class="baby-tip tip2" x="10" y="75">doesn't. What will we do?</text>
</g>
<style>
.baby-tip {
font-size: 14px;
font-family: "MuseoSans100", Arial, Helvetica, sans-serif;
fill: white;
opacity: 0;
}
</style>
<script>
var log = console.info;
function addEvents() {
var dots = document.getElementsByClassName("circle");
var i = dots.length;
while(i--) {
toggleTips(dots[i]);
}
}
function closeOtherTips(otherTips) {
var l = otherTips.length;
while (l--) {
otherTips[l].style.opacity = 0;
}
}
function toggleTips(dot, l) {
window.dot = dot;
dot.addEventListener("click", function() {
var className = dot.id;
var tips = document.getElementsByClassName(className);
var otherTips = document.querySelectorAll('text:not(.' + className + '), rect:not(.' + className + '), polygon:not(.' + className + ')');
var t = tips.length;
closeOtherTips(otherTips);
while (t--) {
tips[t].style.opacity != 0 ? tips[t].style.opacity = 0 : tips[t].style.opacity = 1;
}
});
}
</script>
</svg>
When I save this content as test.svg, and view it in a browser, it runs beautifully - I should see two purple dots, and when I click each one I get a little tool tip, and only one displays at a time.
However, if I create the following html document:
<!DOCTYPE html>
<html>
<body>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<img class="baby-dot-svg" src="test.svg" />
<img class="baby-dot-bg" src="baby.jpg" />
</body>
</html>
Two things change:
1) the tooltip / all js functionality is lost - nothing happens when I click on the dots.
2) the link to baby.jpg no longer works - despite baby.jpg and the svg residing in the same directory, the background of the svg is blank.
See http://images.agoramedia.com/wte3.0/gcms/web_view_svg_test2.html to view this in action.
Why is this breaking?
There are mulitple ways to embed SVG files, but the <img> approach doesn't allow it to be interactive.
Try:
<object data="test.svg" type="image/svg+xml">
<img src="baby.jpg" />
</object>
For more information, see this answer.
I'm trying to do SVG element's animation while dynamically adding DOM elements with jquery. If I add those elements inside <body> as below its working.Working Sample for this is
http://jsfiddle.net/bZdfH/2/
<svg>
<script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>
<circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" >
<animate attributeName="r" dur="4s" values="20; 0; 20" repeatCount="indefinite"/>
</circle>
</svg>
When I add it dynamically, animation will not start in IE, however it works with Chrome and FireFox.Here is what I have.
<svg>
<script type="text/ecmascript" xlink:href="http://leunen.me/fakesmile/smil.user.js"/>
<circle cx="60" cy="60" r="20" style="fill: pink; stroke: red;" onmouseover="changeImage(this)" >
</circle>
</svg>
<script>
function changeImage(circle) {
while (circle.firstChild) {
circle.removeChild(circle.firstChild);
}
circle.setAttributeNS(null, "fill", "blue");
var animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
animate.setAttributeNS(null, "attributeName", "r");
animate.setAttributeNS(null, "values", "20;0;20");
animate.setAttributeNS(null, "dur", "6s");
animate.setAttributeNS(null, "repeatCount", "indefinite");
circle.appendChild(animate);
}
</script>
Here is jsfiddle for the Working Sample.Can anyone please help me??
IE doesn't support SMIL animation.
Source : http://caniuse.com/#search=svg