Is it possible to animate this path one by one using svg animations (from top to bottom, linear or sth like that - including dots)? This code does not have paths.
This is my svg:
<svg xmlns="http://www.w3.org/2000/svg" width="495.303" height="422.699" viewBox="0 0 495.303 422.699">
<g id="Group_110" data-name="Group 110" transform="translate(-670 -3225.301)">
<rect id="Rectangle_172" data-name="Rectangle 172" width="244" height="1" transform="translate(961 3394) rotate(90)" fill="#57af2d"/>
<rect id="Rectangle_173" data-name="Rectangle 173" width="269" height="1" transform="translate(691 3636.5)" fill="#57af2d"/>
<ellipse id="Ellipse_289" data-name="Ellipse 289" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3641.301) rotate(180)" fill="#57af2d"/>
<circle id="Ellipse_298" data-name="Ellipse 298" cx="11.5" cy="11.5" r="11.5" transform="translate(670 3625)" fill="#57af2d"/>
<rect id="Rectangle_174" data-name="Rectangle 174" width="202" height="1" transform="translate(960 3393)" fill="#57af2d"/>
<ellipse id="Ellipse_291" data-name="Ellipse 291" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3398.301) rotate(180)" fill="#57af2d"/>
<ellipse id="Ellipse_292" data-name="Ellipse 292" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3398.301) rotate(180)" fill="#57af2d"/>
<rect id="Rectangle_176" data-name="Rectangle 176" width="165" height="1" transform="translate(1162 3229) rotate(90)" fill="#57af2d"/>
<ellipse id="Ellipse_294" data-name="Ellipse 294" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3233.301) rotate(180)" fill="#57af2d"/>
</g>
</svg>
By far the best and simplest solution is to redraw your SVG so that it does use a <path> for the line. That would be my recommendation.
If you cannot do that, then you can use a path in a mask to achieve what you want. The path (in the mask) follows your line and when you animate its stroke, it reveals the real path.
#revealer path {
animation: reveal 3s linear forwards;
stroke-dashoffset: 906px;
}
#keyframes reveal {
from { stroke-dashoffset: 906px; }
to { stroke-dashoffset: 0px; }
}
<svg xmlns="http://www.w3.org/2000/svg" width="495.303" height="422.699" viewBox="0 0 495.303 422.699">
<defs>
<mask id="revealer">
<path d="M 492,0 L 492,168 L 290,168 L 290,412 L 0,412" fill="none" stroke="white" stroke-width="26" stroke-dasharray="906 906"/>
</mask>
</defs>
<g mask="url(#revealer)">
<g id="Group_110" data-name="Group 110" transform="translate(-670 -3225.301)">
<rect id="Rectangle_172" data-name="Rectangle 172" width="244" height="1" transform="translate(961 3394) rotate(90)" fill="#57af2d"/>
<rect id="Rectangle_173" data-name="Rectangle 173" width="269" height="1" transform="translate(691 3636.5)" fill="#57af2d"/>
<ellipse id="Ellipse_289" data-name="Ellipse 289" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3641.301) rotate(180)" fill="#57af2d"/>
<circle id="Ellipse_298" data-name="Ellipse 298" cx="11.5" cy="11.5" r="11.5" transform="translate(670 3625)" fill="#57af2d"/>
<rect id="Rectangle_174" data-name="Rectangle 174" width="202" height="1" transform="translate(960 3393)" fill="#57af2d"/>
<ellipse id="Ellipse_291" data-name="Ellipse 291" cx="4" cy="4" rx="4" ry="4" transform="translate(964.303 3398.301) rotate(180)" fill="#57af2d"/>
<ellipse id="Ellipse_292" data-name="Ellipse 292" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3398.301) rotate(180)" fill="#57af2d"/>
<rect id="Rectangle_176" data-name="Rectangle 176" width="165" height="1" transform="translate(1162 3229) rotate(90)" fill="#57af2d"/>
<ellipse id="Ellipse_294" data-name="Ellipse 294" cx="4" cy="4" rx="4" ry="4" transform="translate(1165.303 3233.301) rotate(180)" fill="#57af2d"/>
</g>
</g>
</svg>
Related
I'm trying to interact with a hex map SVG which has the following format.
Sample:
<g>
<path cs="100,100" d="M0.5,0.5 L1919.5,0.5 L1919.5,928.5 L0.5,928.5 Z" fill="#505050" stroke="#000000" fill-opacity="1" stroke-width="1" stroke-opacity="1" class="amcharts-bg"></path>
</g>
<g>
<g transform="translate(682.7373750469994,737.8023617303337) scale(1)">
<g>
<g role="menuitem" aria-label="Ireland " transform="translate(127.53285159244186,-251.50323425913655)">
<path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
</g>
<g role="menuitem" aria-label="Ireland " transform="translate(145.53967343300496,-251.50323425913655)">
<path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
</g>
<g role="menuitem" aria-label="Northern Ireland " transform="translate(163.5376554003032,-251.50323425913655)">
<path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
</g>
<g role="menuitem" aria-label="Northern Ireland " transform="translate(181.53563736760145,-251.50323425913655)">
<path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
</g>
<g role="menuitem" aria-label="Northern Ireland " transform="translate(199.54245920816453,-251.50323425913655)">
<path cs="100,100" d="M-7.5,8.5 L8.5,8.5 L8.5,-7.5 L-7.5,-7.5 Z" fill="#818181" stroke="#818181" fill-opacity="1" stroke-width="0.01" stroke-opacity="1" transform="translate(0,0) scale(1)" class="amcharts-map-image"></path>
</g>
Here is a link to the SVG
Using D3 I would like to interact with it, for example adding a mouseover event that simply changes the colour of a region when when hovered over
In d3 I'm used to interacting with an ID for example d3.selectAll("xxx").
The SVG doesn't contain any IDs and the only thing differentiating the regions is the aria-label property.
How can I reference an aria-label and use that to interact with a region eg "Wales"
I've made a start using this JSFIDDLE
d3.xml('https://raw.githubusercontent.com/gangrel11/samplefiles/main/amCharts.pixelMap.svg')
.then(data => {
d3.select('body').node().append(data.documentElement)
var xxx =
d3.select('Wales ')
// .style('fill', 'orange')
.on("mouseover", function(d) {
//xxx.style('fill', 'orange')
xxx.style('opacity', 0.75)
})
.on("mouseout", function(d) {
xxx.style('opacity', 1)
});
})
Any help would be much appreciated
I need your help with the implementation of svg animation.
https://youtu.be/lrWjkARl8Zg
(sorry for the poor video quality)
And I have such a structure of svg
I need the arrow (class = "arrow") itself to move along long lines and draw it.
<svg class="vector" width="1193" height="329" viewBox="0 0 1193 329" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="long_line" d="M1436 327.98L84.7148 327.98C73.8082 328.219 62.9639 326.275 52.818 322.262C42.6722 318.249 33.4293 312.249 25.6315 304.613C17.8337 296.977 11.6384 287.858 7.40866 277.793C3.17891 267.728 0.999997 256.919 0.999996 246C0.999996 235.081 3.17891 224.272 7.40866 214.207C11.6384 204.142 17.8337 195.023 25.6315 187.387C33.4292 179.751 42.6722 173.75 52.818 169.738C62.9638 165.725 73.8082 163.781 84.7147 164.02L589.173 164.02" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path class="arrow" d="M544 204L589 164L548 124" stroke="black" stroke-width="2"/>
<path class="arrow" d="M504 1L459 41L500 81" stroke="black" stroke-width="2"/>
<path class="short_line" d="M1308 41L459 41" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
</svg>
Advise which library I can use
You could do this using svg smil animations:
A Guide to SVG Animations (SMIL)
Your arrow animations could be achieved by
<animateMotion> for moving the arrow element and
animating the stroke-dashoffset property.
Animated example
svg {
border: 1px solid #ccc;
width: 33%;
overflow: visible;
display: block;
}
path {
stroke-width: 10;
stroke: #000;
}
<p>Click on animation for replay</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1443,126H594" />
</g>
<animateMotion href="#arrow1" dur="2" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-long" />
</animateMotion>
<animate attributeType="XML" href="#mpath-long" id="strokeAni" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" begin="0;graphics.click" fill="freeze" />
<animateMotion href="#arrow2" dur="2s" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-short" />
</animateMotion>
<animate attributeType="XML" href="#mpath-short" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" fill="freeze" begin="0;graphics.click" />
</svg>
Quite likely, you will have to tweak your svg viewBox to get the desired result.
A common trick is to position element that's supposed to move along the motion path to x/y = 0.
Static example
<style>
svg{
border: 1px solid #ccc;
width: 33%;
overflow:visible;
display:block;
}
path{
stroke-width:10;
stroke: #000;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1443,126H594" />
</g>
</svg>
I have patterns that each have a single image in them.
I have not used svgs much before and do not know which attributes to change to get clear result. I've been trying all sorts of combinations of preserveAspectRatio, viewBox, patternUnits, but I cannot seem to get what I want.
https://codepen.io/shkasjon/pen/WYwZmy
here you can see that the second svg image is displayed clearly and sharply and the first one is blurred.
How can i fix the quality of the first svg image?
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>
</svg>
patternUnits="userSpaceOnUse" add to <pattern >
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 470 468">
<defs><pattern id="image-as_profile_widget-4" height="100%" width="100%" patternUnits="userSpaceOnUse" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs><path fill="url(#image-as_profile_widget-4)" d="M9.635 132.808C24.782 59.782 71.388 19.109 144.085 6.822c53.74-9.081 107.5-9.196 161.15.255 74.852 13.185 119.85 56.23 134.185 130.36 11.075 57.29 11.249 115.191-.174 172.427-15.324 72.52-63.132 117.285-135.561 129.527-53.74 9.08-107.5 9.195-161.15-.255-74.852-13.186-120.05-58.38-134.384-132.509-11.64-57.668-10.52-115.935 1.484-173.82z" id="path-1"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="146" height="146" viewBox="-10 -10 146 146">
<defs><pattern id="image-as_profile_widget-2" patternUnits="userSpaceOnUse" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice"><image itemprop="photo" height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="http://www.gravatar.com/avatar/4a7131ab3b3fa22f2fea9fadaa018981?s=146"></image></pattern></defs>
<rect x="0" y="0" rx="4" ry="4" width="146" height="146" fill="url(#image-as_profile_widget-2)" stroke="#ffffff" stroke-width="0" stroke-opacity="1" id="path-1"></rect>
Made up a cloudy svg background for my project.
It works perfectly in MS Edge,in Google Chrome, it even works when placed as desktop background in XFCE.
But it ain`t working in Firefox. Neither under Win, nor Linux.
Maybe there is some crutch needed?
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<radialGradient id="Background" cx="50%" cy="50%" r="120%">
<stop offset="0%" stop-opacity="1" stop-color="#369" />
<stop offset="170%" stop-opacity="1" stop-color="#000"/>
</radialGradient>
<filter id="noise" x="0" y="0" width="100%" height="100%">
<feImage xlink:href="#bkgrad" result="image" x="0" y="0"/>
<feTurbulence baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>
<feColorMatrix in="fnoise" result="snoise"
type="saturate"
values="0" />
<feBlend in="SourceGraphics" in2="snoise" mode="multiply"></feBlend>
<feBlend in="snoise" in2="image" mode="multiply"></feBlend>
</filter>
<polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
<pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
width="24" height="13.8" >
<use xlink:href="#Hexagon"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Background)" id="bkgrad" ></rect>
<rect x="0" y="0" width="100%" height="100%" style="filter:url('#noise')" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>
The attribute value for the <feBlend> filter is in="SourceGraphic", not in="SourceGraphics". Firefox did not render the whole filter because of that error, while other browsers and renderers used a fallback and used the last filter result as first source, effectively multiplying the result of feColorMatrix with itself. (This behavior is new in the CSS filter spec, it was not defined in SVG 1.1.)
Since the output of that part of the filter is never used anyway, remove it.
Additionally, as Robert Longson pointed out, feImage does not support references to internal fragments in Firefox. But you don't really need it. The referenced image is identical to the source graphic for the filter, so you can simply remove that primitive and reroute the input to the other primitives:
<svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<defs>
<radialGradient id="Background" cx="50%" cy="50%" r="120%">
<stop offset="0%" stop-opacity="1" stop-color="#369" />
<stop offset="170%" stop-opacity="1" stop-color="#000"/>
</radialGradient>
<filter id="noise" x="0" y="0" width="100%" height="100%">
<feTurbulence baseFrequency="0.001" seed="999" type="fractalNoise" numOctaves="8" result="fnoise"/>
<feColorMatrix in="fnoise" result="snoise"
type="saturate"
values="0" />
<feBlend in="snoise" in2="SourceGraphic" mode="multiply"></feBlend>
</filter>
<polyline id="Hexagon" stroke="#000" stroke-opacity="0.15" fill="none" stroke-width = "1.2px"
points="0,0 8,0 12,6.9 8,13.8 0,13.8 8,13.8 12,6.9 20,6.9 24,13.8 20,6.9 24,0 32,0 "/>
<pattern id="Hex_Pattern" patternUnits="userSpaceOnUse" patternTransform="translate(0,0)"
width="24" height="13.8" >
<use xlink:href="#Hexagon"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" style="filter:url(#noise)" fill="url(#Background)"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#Hex_Pattern)" id="hexes"/>
</svg>
could you please help me out, how to create SVG animation, which will behave like this? https://framer.cloud/aSUDY/
I did my best, but it always misbehaves :-(
Here is my code, where I used 6 animations to cycle through (3 to animate from 0.5 to 1 opacity and three to animate vice versa)
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<defs>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s;anim33.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="anim1.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="anim2.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim11"
attributeType="xml"
attributeName="fill-opacity"
begin="anim3.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim22"
attributeType="xml"
attributeName="fill-opacity"
begin="anim11.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim33"
attributeType="xml"
attributeName="fill-opacity"
begin="anim22.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
</defs>
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<use xlink:href="#CON33" ></use>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<use xlink:href="#CON22" ></use>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<use xlink:href="#CON11" ></use>
</g>
</svg>
I've changed the animations to use values, they don't really need to be linked.
I've removed the duplication and the elements that really were'nt doing anything other than add complexity.
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;0.5;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;1;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;1;1;1"
dur="2s"
repeatCount="indefinite"
/>
</ellipse>
</g>
</svg>