NS_BINDING_ABORTED with svg images only - javascript
I have a simple JavaScript code that generating waiting load spinner when a captcha image refreshing. The script works fine with gif images but with animated svg images, the loading spinner does not work and in FireFox returns NS_BINDING_ABORTED in the browser's network console. Here is the code:
$(document).ready(function(){
$("#captchaImg").click(function(e){
e.preventDefault();
src = $(this).children('img').attr('src');
width = '{{config('captcha.flat.width')}}px';
height= '{{config('captcha.flat.height')}}px';
console.log(width, height)
// IN THE FOLLOWING LINE, REPLACING gif with svg makes the error.
$(this).children('img').attr({'src':'/imgs/loading.gif','width':width, 'height': height})
src = src.replace(/&t=.*/,'')
t = new Date();
$(this).children('img').attr('src',src+"&t="+t.getTime());
$( "#randQuote" ).text( '{{__('Loading')}}' );
$.ajax({
url: "/rand-quote",
cache: false
})
.done(function( data ) {
console.log(data.msg)
$( "#randQuote" ).text( data.msg );
return false;
});
})
})
I don't know what is the difference in this case between gif and svg that causes that issue? and how could I solve it?!
Note:
The svg image used is generated from https://loading.io and the following its code:
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="64px" height="64px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="rotate(0 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#482173">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.875s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(45 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#2e6f8e">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.75s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(90 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#29af7f">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.625s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(135 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#bddf26">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.5s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(180 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#482173">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.375s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(225 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#2e6f8e">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.25s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(270 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#29af7f">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.125s" repeatCount="indefinite"></animate>
</rect>
</g><g transform="rotate(315 50 50)">
<rect x="37.5" y="5" rx="4.76" ry="4.76" width="25" height="34" fill="#bddf26">
<animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
</rect>
</g>
<!-- [ldio] generated by https://loading.io/ --></svg>
I found the solution but I still don't know the reason
The solution is simply adding the loading.svg in the HTML like the following:
<img style="display:none;" src="/imgs/loading.svg">
After that replacing gif by svg in the script has worked fine. The solution is inspired form my Captcha Class # line 125. Originally, I made it to ensure loading the image during the page loading before its call from the JavaScript. I noticed that svg images works there fine.
I still do not able to identify what is the difference between gif
and svg that leads to that behavior, in which, adding the image
src of the image into page's HTML is obligatory to allow calling it
afterwords from the JavaScript?
Related
How to reset an svg animation to its initial state?
I have an SVG animation similar to this:
function startAnimation() {
document.querySelector('#anim-width').beginElement();
}
<svg width="100" viewBox="0 0 100 100">
<rect id="box" x="10" y="10" fill="red" width="10" height="10">
<animate
id="anim-width"
attributeName="width"
from="10"
to="80"
dur="1s"
fill="freeze"
begin="click"
/>
<animate
attributeName="height"
from="10"
to="80"
begin="anim-width.end + 0s"
dur="1s"
fill="freeze"
/>
</rect>
</svg>
<br/>
<button onclick="startAnimation()">Start</button>
What I want to achieve is the red box starts from 10 by 10, when clicking the button, the width expands from 10 to 80, then the height expands to 80 after the width animation is done.
It works fine for the first playback, but when clicking the button again the height starts from 80 instead of 10, how do I reset everthing to its intial state and replay the entire animation?
I tried adding document.querySelector('#box').setAttribute('height', '10'); in the startAnimation() function but it doesn't seem to work.
I'm adding an element <set> inside the rect and I'm starting the set element inside the function function startAnimation()
The <set> element ìs a maner of setting the value of an attribute (height in this case), like an animation with duration 0.
function startAnimation() {
document.querySelector("#set").beginElement();
document.querySelector("#anim-width").beginElement();
}
<svg width="100" viewBox="0 0 100 100">
<rect id="box" x="10" y="10" fill="red" width="10" height="10">
<animate id="anim-width" attributeName="width" from="10" to="80" dur="1s" fill="freeze" begin="click" />
<animate id="anim-height" attributeName="height" from="10" to="80" begin="anim-width.end + 0s" dur="1s" fill="freeze" />
<set id="set" attributeName="height" to="10"></set>
</rect>
</svg>
<br />
<button onclick="startAnimation()">Start</button>
Another option is just to have an <animate> element that starts the animation by resetting the height.
document.querySelector("#anim-height").addEventListener("endEvent", enableButton);
function startAnimation() {
document.querySelector("#start-btn").disabled = true;
document.querySelector("#anim-start").beginElement();
}
function enableButton()
{
document.querySelector("#start-btn").disabled = false;
}
<svg width="100" viewBox="0 0 100 100">
<rect id="box" x="10" y="10" fill="red" width="10" height="10">
<animate id="anim-start" attributeName="height" to="10" dur="0.01s" fill="freeze" begin="indefinite" />
<animate id="anim-width" attributeName="width" from="10" to="80" dur="1s" fill="freeze" begin="anim-start.end + 0s" />
<animate id="anim-height" attributeName="height" from="10" to="80" begin="anim-width.end + 0s" dur="1s" fill="freeze" />
</rect>
</svg>
<br />
<button id="start-btn" onclick="startAnimation()">Start</button>
Animation on SVG when it is in viewport for multiple SVGs in page
I have three SVGs in a page and I need to trigger SVG animation on scroll when they are are in viewport (one after the other).
Im using this code:
<script>
// Get the position on the page of the SVG
var svgLocation = document.getElementById("euhlm2ug8tw1").getBoundingClientRect();
// Scroll offset that triggers animation start.
// In this case it is the bottom of the SVG.
var offsetToTriggerAnimation = svgLocation.y + svgLocation.height;
// Function to handle the scroll event.
// Add an event handler to the document for the "onscroll" event
function scrollAnimTriggerCheck(evt)
{
var viewBottom = window.scrollY + window.innerHeight;
if (viewBottom > offsetToTriggerAnimation) {
// Start the SMIL animation
document.getElementById("animation").beginElement();
// Remove the event handler so it doesn't trigger again
document.removeEventListener("scroll", scrollAnimTriggerCheck);
}
}
// Add an event handler to the document for the "onscroll" event
document.addEventListener("scroll", scrollAnimTriggerCheck);
</script>
and it works correctly if I have one only SVG. But if I put more SVGs in the same page, things don't work so good.
If I put three scripts with different Id elements, it doesn't work.
Can I put together three scripts relative to different SVGs without creating conflicts?
Or what is the best way?
I can't find a solution.
The SVG appears like this:
<svg id="euhlm2ug8tw1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 161.690000 59.070000" shape-rendering="geometricPrecision" text-rendering="geometricPrecision"><path id="euhlm2ug8tw3" d="M125.300000,19.390000C123.430000,12.130000,124.810000,6.290000,133.780000,5.590000C136.660000,7.450000,139.930000,7.900000,141.180000,10.810000C145.560000,20.990000,131.150000,27.490000,125.300000,19.390000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw4" d="M73,14C71.750000,9.170000,72.670000,5.270000,78.650000,4.810000C80.570000,6.050000,82.750000,6.350000,83.580000,8.290000C86.490000,15.070000,76.900000,19.400000,73,14" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0"/><path id="euhlm2ug8tw5" d="M132.190000,42.870000C132.140000,36.660000,142.670000,40.650000,137.170000,44.080000C134.890000,45.500000,132.220000,45.340000,132.190000,42.870000" transform="matrix(1 0 0 1 1.09532498999999 0.11944217500000)" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw6" d="M144.030000,43.650000C147.330000,41.320000,152.360000,42.480000,152.910000,45.590000C154.120000,52.490000,140.250000,52.090000,144.030000,43.650000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw7" d="M94.010000,35.940000C90.340000,32.880000,97.390000,26.160000,102.760000,27.880000C106.730000,30.940000,99.400000,40.440000,94.010000,35.940000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/><path id="euhlm2ug8tw8" d="M38.800000,25.940000C39.230000,25.600000,39.300000,26.240000,39.730000,25.890000C39.760000,25.330000,39.960000,24.830000,39.940000,24.250000C39.400000,24.280000,38.250000,25.070000,38.800000,25.940000M8.700000,25.030000C9.190000,24.820000,9.540000,24.550000,9.660000,24.200000C9.910000,23.670000,9.130000,23.370000,9.310000,23.010000C9.870000,22.680000,9.950000,23.640000,10.460000,23.440000C10.390000,23.110000,9.810000,22.580000,10.410000,22.500000C10.820000,22.920000,11.190000,23.460000,11.690000,23.640000C11.840000,23.260000,11.780000,22.790000,11.430000,22.220000C12.100000,21.950000,12.170000,23.280000,12.710000,23.370000C13.610000,22.350000,14.820000,22.890000,15.750000,22.930000C16.020000,22.630000,15.720000,22.120000,16.250000,21.930000C16.810000,22.290000,16.960000,23.800000,17.910000,23.090000C18.480000,22.860000,17.880000,22.200000,18.570000,22.010000C19.070000,22.240000,18.530000,22.880000,18.600000,23.350000C20.190000,23.620000,20.520000,21.890000,21.160000,21C20.860000,19.800000,20.360000,19.310000,21.010000,18.560000C21.570000,18.470000,21.780000,19.320000,22.390000,19.080000C22.800000,18.930000,22.770000,18.610000,22.800000,18.310000C23.260000,18,23.410000,18.550000,23.800000,18.420000C24.400000,17.900000,23.880000,16.950000,24.180000,16.310000C24.630000,16.380000,24.660000,17.620000,25.230000,17.370000C26.110000,16.270000,28.180000,16.200000,28.940000,17.580000C30,17.700000,29.510000,16.600000,30.230000,16.210000C30.670000,16.990000,30.270000,17.460000,30.550000,18.190000C31.310000,18.790000,32.540000,17.960000,32.970000,17.650000C33.520000,19.490000,34.260000,20.940000,36.300000,19.970000C36.880000,20.680000,35.780000,20.740000,36.170000,21.380000C37.420000,22.840000,39.630000,21.670000,41,22.810000C43.400000,21.250000,45.070000,21.680000,46.840000,21.840000C47.090000,21.540000,47.320000,21.230000,47.570000,20.920000C49.020000,22.070000,51.060000,21.610000,52.460000,22.900000C52.460000,23.390000,52.070000,23.730000,52.330000,24.310000C53.560000,23.030000,54.370000,22.970000,56.110000,22.560000C55.990000,23.470000,56.630000,24.700000,57.850000,23.880000C58.180000,24.450000,57.400000,24.590000,57.880000,25.220000C60.480000,26.090000,63.740000,22.990000,65.940000,24.960000C65.900000,25.720000,66.190000,26.610000,66.790000,27.270000C66.200000,27.750000,65.960000,28.370000,66.330000,29.220000C64.940000,31.340000,61.800000,31.610000,60.770000,28.710000C59.500000,29.630000,56.750000,28.300000,55.590000,30.720000C56.400000,31.220000,56.550000,31.970000,57.150000,32.500000C56.260000,32.660000,55.210000,33.640000,54.170000,33.490000C53.260000,35.360000,51.480000,33.050000,49.920000,33.340000C49.050000,33.500000,48.510000,34.350000,47.720000,34.360000C45.780000,34.380000,44.260000,32.300000,44.550000,29.850000C43.670000,30.340000,43.280000,29.510000,42.460000,29.850000C42.810000,30.860000,42.610000,31.670000,42.060000,32.350000C40.870000,32.430000,40.870000,33.240000,39.410000,32.810000C39.120000,33.360000,38.540000,33.890000,39.530000,33.910000C39.360000,34.020000,39.070000,34.090000,39.130000,34.290000C39.540000,34.480000,39.750000,35.210000,40.090000,35.580000C39.380000,35.860000,39.370000,34.230000,38.570000,34.740000C38.570000,35.240000,39.360000,35.200000,38.700000,35.450000C38.240000,35.160000,37.770000,34.920000,37,35.470000C36.300000,34.890000,35.700000,34.020000,34.550000,34.680000C34.090000,34.400000,33.800000,33.630000,33.270000,33.530000C30.480000,33.810000,27.990000,34.870000,25.570000,34.590000C25.400000,35.090000,25,34.690000,24.850000,35.120000C24.140000,34.680000,23.810000,33.210000,22.560000,34.250000C23.340000,35.210000,22.420000,35.520000,22.720000,36.300000C21.120000,35.990000,20.680000,37.250000,19.560000,38.150000C18.880000,37.330000,17.720000,37.970000,17.140000,38.690000C16.850000,38.060000,16.290000,38.160000,15.850000,37.940000C15.170000,38.120000,15.770000,38.790000,15.190000,39.020000C14.750000,38.800000,14.490000,38.070000,13.730000,38.730000C13.440000,37.740000,12.110000,38.100000,11.720000,38.500000C11.210000,38.100000,11.480000,37.750000,11.070000,37.060000C10.910000,37.130000,10.760000,37.210000,10.600000,37.280000C9.940000,35.670000,8.910000,36.050000,8.620000,34.150000C8.190000,34.250000,7.670000,34.600000,7.460000,34.110000C7.390000,33.640000,8.680000,33.690000,8.350000,33.120000C7.970000,31.380000,7.070000,31.080000,5.900000,30.210000C6.500000,29.990000,6.780000,30.650000,7.530000,30.030000C7.770000,28.490000,6.710000,26.980000,6.030000,26.290000C6.660000,26.240000,6.950000,27.100000,7.720000,26.660000C8.640000,25.840000,7.120000,24.310000,6.970000,23.730000C7.560000,24.100000,8.020000,24.880000,8.700000,25.030000" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="1"/>
<animate xlink:href="#euhlm2ug8tw8" id="animation"
attributeName="opacity"
from="0" to="1" dur="1.5s" fill="freeze"
begin="indefinite"/>
<animate xlink:href="#euhlm2ug8tw4" id="antimation2"
attributeName="opacity"
from="0" to="1" dur="1s" fill="freeze"
begin="animation.begin+0.4s" />
<animate xlink:href="#euhlm2ug8tw7" id="antimation3"
attributeName="opacity"
from="0" to="1" dur="1s" fill="freeze"
begin="animation.begin+0.8s" />
<animate xlink:href="#euhlm2ug8tw3" id="antimation4"
attributeName="opacity"
from="0" to="1" dur="1s" fill="freeze"
begin="animation.begin+1.2s" />
<animate xlink:href="#euhlm2ug8tw5" id="antimation5"
attributeName="opacity"
from="0" to="1" dur="1s" fill="freeze"
begin="animation.begin+1.6s" />
<animate xlink:href="#euhlm2ug8tw6" id="antimation6"
attributeName="opacity"
from="0" to="1" dur="1s" fill="freeze"
begin="animation.begin+2s" />
</svg>
Variable text in SVG defined text tag
I would like to re-use def-ined shapes in SVG but with variable text. Is the following somehow possibel ? <svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <g id="shape"> <rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" /> <text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text> </g> </defs> <g transform="translate(0 0)"> <use xlink:href="#shape" text="test" /> </g> <g transform="translate(100 0)"> <use xlink:href="#shape" text="test2" /> </g> </svg> EDIT: since the solution would probably involve some javascript I have added the tag.
Clone the template and adjust as necessary.
let shape = document.getElementById("shape");
Array.from(document.getElementsByTagName("use")).forEach((use) => {
let text = use.getAttribute("text");
let clone = shape.cloneNode(true);
// might want to do something more robust here
clone.children[1].textContent = text;
use.parentNode.appendChild(clone);
use.parentNode.removeChild(use);
})
<svg width="1000pt" height="1000pt" viewBox="0.00 0.00 1000.00 1000.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<g id="shape">
<rect x="10" y="0" rx="5" ry="5" width="80" height="40" style="fill:lightblue;stroke-width:0,opacity:0.5" />
<text text-anchor="middle" x="40" y="20" font-family="Helvetica,sans-Serif" font-size="8.00">variable_text</text>
</g>
</defs>
<g transform="translate(0 0)">
<use xlink:href="#shape" text="test" />
</g>
<g transform="translate(100 0)">
<use xlink:href="#shape" text="test2" />
</g>
</svg>
SVG pause/play Can not figure out why this isn't working...?
I need code to work just like on this page.
Play and pausing of an SVG. I went into inspect and pulled all the code I could, which seemed to be HTML. I could not see or find CSS or Javascript. Not sure if that is normal.
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="80 0 1024 768" onload="t=setInterval(updateTimer, 100)">
<script>
var time = 0;
function updateTimer() {
//document.getElementById("t").textContent = document.documentElement.getCurrentTime().toFixed(0) + "s";
}
function pause() {
time = document.documentElement.getCurrentTime();
document.documentElement.pauseAnimations();
clearInterval(t);
}
function play() {
if(time > 0)
document.documentElement.setCurrentTime(time);
clearInterval(t);
t=setInterval(updateTimer, 100);
document.documentElement.unpauseAnimations();
}
function stop() {
time = 0;
clearInterval(t);
document.documentElement.setCurrentTime(0);
document.documentElement.pauseAnimations();
}
</script>
<linearGradient id="grad">
<stop stop-color="rgb(10%,80%,10%)" offset="0"/>
<stop stop-color="rgb(10%,40%,20%)" offset="0.4"/>
<stop stop-color="rgb(10%,90%,30%)" offset="0.7"/>
<stop stop-color="rgb(10%,50%,40%)" offset="1"/>
</linearGradient>
<rect fill="url(#grad)" width="0%" height="50" x="100" y="300" rx="5">
<animate attributeName="width" to="100%" begin="0s" dur="30s"/>
</rect>
<text id="t" style="font:24px Arial Black;fill:white;stroke:black" transform="translate(100 334)"/>
<animateTransform type="translate" attributeName="transform" xlink:href="#t" begin="1s" dur="29s" from="100 334" to="1024 334"/>
<g transform="translate(100 500)">
<!-- Play -->
<g onclick="play()">
<rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5"/>
<path id="play" d="M12 5l20 15l-20 15Z" fill="white" pointer-events="none"/>
</g>
<!-- Pause -->
<g transform="translate(50 0)">
<rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="pause();"/>
<path id="pause" d="M14 10l0 20M26 10l0 20" stroke="white" fill="none" stroke-width="8" pointer-events="none"/>
</g>
<!-- Stop (rewind and pause) -->
<g transform="translate(100 0)">
<rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="stop()"/>
<rect x="10" y="10" width="20" height="20" fill="white" pointer-events="none"/>
</g>
</g>
</svg>
When I attempt playback on Code pen, the SVG plays but buttons don't work. At all. I thought the "onclick" would do it...?
Is this because the JS isn't accessible/applied? I don't see any "DIV" or "DOM" so I assume its not a CSS thing...
I have a basic knowledge of HTML, less of CSS and know NOTHING about JavaScript
Short version: getCurrentTime & setCurrentTime must be called on the SVG node.
const mySvg = document.getElementById("mySvg")
function updateTimer() {
const t = `${mySvg.getCurrentTime().toFixed(0)}s`;
document.getElementById("t").textContent = t;
}
function setCurrentTime(t) {
mySvg.setCurrentTime(t)
}
function pause() {
mySvg.pauseAnimations()
}
function play() {
mySvg.unpauseAnimations()
}
function stop() {
clearInterval();
setCurrentTime(0);
mySvg.pauseAnimations()
updateTimer();
}
<svg id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="80 0 1024 768" onload="t=setInterval(updateTimer, 100)">
<linearGradient id="grad">
<stop stop-color="rgb(10%,80%,10%)" offset="0"/>
<stop stop-color="rgb(10%,40%,20%)" offset="0.4"/>
<stop stop-color="rgb(10%,90%,30%)" offset="0.7"/>
<stop stop-color="rgb(10%,50%,40%)" offset="1"/>
</linearGradient>
<rect fill="url(#grad)" width="0%" height="50" x="100" y="300" rx="5">
<animate attributeName="width" to="100%" begin="0s" dur="30s"/>
</rect>
<text id="t" style="font:24px Arial Black;fill:white;stroke:black" transform="translate(100 334)"/>
<animateTransform type="translate" attributeName="transform" xlink:href="#t" begin="1s" dur="29s" from="100 334" to="1024 334"/>
<g transform="translate(100 500)">
<!-- Play -->
<g onclick="play()">
<rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5"/>
<path id="play" d="M12 5l20 15l-20 15Z" fill="white" pointer-events="none"/>
</g>
<!-- Pause -->
<g transform="translate(50 0)">
<rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="pause();"/>
<path id="pause" d="M14 10l0 20M26 10l0 20" stroke="white" fill="none" stroke-width="8" pointer-events="none"/>
</g>
<!-- Stop (rewind and pause) -->
<g transform="translate(100 0)">
<rect width="40" height="40" rx="10" stroke="black" fill-opacity="0.5" onclick="stop()"/>
<rect x="10" y="10" width="20" height="20" fill="white" pointer-events="none"/>
</g>
</g>
</svg>
Long version: After all that, why wasn't it working in Codepen?
I can see that the link you posted is to an SVG document with it's own inline JavaScript (in the script tag).
The script calls some SVGElement methods on the SVG root element with document.documentElement.pauseAnimations();.
But what exactly is document element?
Document.documentElement returns the Element that is the root element of the document (for example, the element for HTML documents).
Because this code was called inside an SVG document, document.documentElement returns the SVG root node. However, because codepen is an HTML document, document.documentElement will return the HTML root node.
And you can't call methods like pauseAnimations() on an HTML root node because the HTML root node doesn't understand those methods.
So modern browsers can display SVG documents, HTML documents (and more) but here's the kicker: SVG documents can live inside of HTML documents.
You can see how document.documentElement could refer to two potential things depending on what type of document the JavaScript code was run from.
SVG defs use relation between different figures Firefox
We've got a simply code, which works cross-browser:
<html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="100">
<circle id="circ" cx="120" cy="40"
r="30" fill="green"/>
<rect id="rect" x="10" y="10"
width="60" height="60" fill="blue">
<set attributeName="fill-opacity" to="0.5"
begin="circ.mouseover" end="circ.mouseout"/>
</rect>
</svg>
When I try to use the elements in defs block I'm losing relation between two rectangles in Firefox browser.
<html>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="100">
<defs>
<circle id="circ" cx="120" cy="40"
r="30" fill="green"/>
<rect id="rect" x="10" y="10"
width="60" height="60" fill="blue">
<set attributeName="fill-opacity" to="0.5"
begin="circ.mouseover" end="circ.mouseout"/>
</rect>
</defs>
<use id="use_circ.rectangles" xlink:href="#circ" />
<use id="use_rect.rectangles" xlink:href="#rect" />
</svg>
I've read something about relation here http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs? - actually this words
"Note that this effect does not work in Firefox Firefox 6 and earlier (I think), which is perhaps the biggest drawback of this method. "
I need to press the button to move(change) another element.
I also tried to make something like this, to set relation effect:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Button</title>
<script type="text/javascript" language="javascript">
function turn_right(button, miliSec)
{
document.getElementById("circ_left_position").setAttribute('visibility','hidden');
setTimeout(function() {
button.parentNode.setAttribute('xlink:href','#rect.right_position');
}, miliSec);
document.getElementById("circ_right_position").setAttribute('visibility','visible ');
}
function turn_left(button, miliSec)
{
document.getElementById("circ_right_position").setAttribute('visibility','hidden ');
setTimeout(function() {
button.parentNode.setAttribute('xlink:href','#rect.left_position');
}, miliSec);
document.getElementById("circ_left_position").setAttribute('visibility','visible ');
}
</script>
</head>
<body style="margin:0; border:0">
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="200" height="100">
<defs>
<g id="rect.left_position" onclick="turn_right(this,500)">
<rect x="10" y="10" width="60" height="60" fill="blue"/>
<circle id="circ_left_position" cx="120" cy="40" r="30" fill="green"/>
<animateTransform id="trigger1" begin="click"
attributeName="transform" type="rotate" additive="replace"
from="0 70 70" to="10 70 70" dur="0.5s" fill="freeze" />
</g>
<g id="rect.right_position" onclick="turn_left(this,500)">
<rect x="10" y="10" width="60" height="60" fill="blue" transform="rotate(10 70 70)"/>
<circle id="circ_right_position" cx="120" cy="40" r="30" fill="green"/>
<animateTransform id="trigger1" begin="click"
attributeName="transform" type="rotate" additive="replace"
from="0 70 70" to="-10 70 70" dur="0.5s" fill="freeze" />
</g>
</defs>
<use id="positions.rectangles" xlink:href="#rect.left_position" />
</svg>
</body>
In Chrome and FF we get different results. Farther, I don't understand difference in browsers. I'm sure, there exist a simple solution.
A use does not copy the animation this is not expected behavior in SVG 1.1 (this is not a firefox issue) Smil in SVG 2 will address this. What you can do is to use scripting to clone each animation and append them to the use tag. Perhaps on a onload event. However I believe this will not work for your specific code set because specify an id.