.icon-garant:hover {
fill-opacity: 0;
transition: fill-opacity 1s;
}<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 56 64" id="garant" xmlns="http://www.w3.org/2000/svg">
<path fill-opacity="1" fill="red" fill-rule="evenodd" clip-rule="evenodd" d="M28.888.215l25.575..."/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M28.888.215l25.575 ..."/>
</symbol>
</svg>document.getElementById("canvas");
var ctx = canvas.getContext("2d");
x = 10;
y = 10;
j = 0;
rays = [];
blocks = [];
for (i = 0; i < 20; i++) {
rays.push({
x: 0,
y: 0,
radius: 0,
qq: 0,
angle: i,
raysa: 0
});
}
blocks.push({
x: 20,
y: 20
});
function draw() {
ctx.clearRect(0, 0, 320, 320);
for (i = 0; i < rays.length; i++) {
if (rays[i].qq == 0) {
rays[i].x = Math.cos(rays[i].angle / 180 * Math.PI) * rays[i].raysa + x;
rays[i].y = Math.sin(rays[i].angle / 180 * Math.PI) * rays[i].raysa + y;
rays[i].radius = rays[i].raysa;
if (rays[i].x >= 100) {
rays[i].qq = 1;
}
rays[i].raysa += 1;
}
if (rays[i].qq == 1) { // вынес из if (rays[i].qq == 0)
rays[i].x = Math.cos(rays[i].angle / 180 * Math.PI) * rays[i].radius + x;
rays[i].y = Math.sin(rays[i].angle / 180 * Math.PI) * rays[i].radius + y;
}
if (j % 10 == 0) {
console.log(rays[i].x);
}
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(rays[i].x, rays[i].y);
ctx.stroke();
rays[i].angle += 2;
j++;
}
}
setInterval(draw, 20);<svg width="100%" height="100%"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="10%" y="10%" width="15%" height="80%" fill="#ff0"/>
<rect x="30%" y="5%" width="20%" height="90%" fill="#ff0"/>
<rect x="55%" y="15%" width="20%" height="70%" fill="#ff0"/>
<rect x="80%" y="25%" width="15%" height="70%" fill="#ff0"/>
</svg>
