Same SVG is repeated in carousel multiple times. Carousel is constructed in PHP using a while loop. How can I trigger animation at the click of a next/prev button in carousel?
My jQuery code is as below. It animates only the first <animate> tag. I think I must have explained my whole point.
jQuery(document).ready(function($){
$('.first').click(function(){
$('animate')[0].beginElement();
$('animateTransform')[0].beginElement();
});
});
My SVG code:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" dur="3s" class="ani" />
</g>
</g>
</svg>
You forgot to add a question style sheet. I restored the color values of the svg parts according to the figure.
Since all animations should start simultaneously at the click of a mouse, you can do without Javascript
To do this, add a launch command to each animation begin="Layer_1.click"
.container {
width:75%;
height:75%;
}
.st0 {fill:#C8C8C8;}
.st1 {fill:#E7E7E7;}
.st2 {fill:#6A6A6A;}
.st3 {stroke:#F6C44A;}
.st4 {fill:#323232;}
.st5 {fill:#CB9751;}
.st6 {fill:#E0B268;}
.st7 {fill:#C8A066;}
.st8 {fill:#E3C084;}
<div class="container">
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 425 386" style="enable-background:new 0 0 425 386;" xml:space="preserve">
<polygon class="st0" points="356.4,330 399.3,370.8 399.3,82.5 357.3,106.5 "/>
<polygon class="st1" points="63.8,105 63.8,329.3 357.3,329.3 357.3,106.5 "/>
<polygon class="st2" points="21.8,369 62.5,329.3 357.3,329.3 399.3,370.8 20.9,370.8 "/>
<polygon class="st0" points="63.8,329.2 20.9,370.8 20.9,82.5 63.8,105 "/>
<g>
<line class="st3" id="line1" x1="65.2" y1="76.3" x2="180.9" y2="76.3"/>
<animate xlink:href="#line1" attributeName="x2" from="65" to="180.9" begin="Layer_1.click" dur="2s" class="ani" />
<line class="st3" id="line2" x1="237.6" y1="76.3" x2="338.6" y2="76.3"/>
<animate xlink:href="#line2" attributeName="x2" from="250" to="338.6" begin="Layer_1.click" dur="2s" class="ani" />
<text x="200" y="80" class="wt1">10'</text>
</g>
<g>
<g>
<text x="368" y="70" class="wt1">5'</text>
</g>
<line class="st3" id="line3" x1="352.1" y1="76.9" x2="362.6" y2="70.8"/>
<animate xlink:href="#line3" attributeName="x2" from="351" to="362.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line3" attributeName="y2" from="77" to="70.8" begin="Layer_1.click" dur="3s" class="ani" />
<line class="st3" id="line4" x1="387.7" y1="58" x2="396.6" y2="51.9"/>
<animate xlink:href="#line4" attributeName="x2" from="388" to="396.6" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#line4" attributeName="y2" from="58" to="51.9" begin="Layer_1.click" dur="3s" class="ani" />
</g>
<g>
<ellipse class="st4" id="elli1" cx="210.1" cy="344.8" rx="37.2" ry="4.5"/>
<animate xlink:href="#elli1" attributeName="rx" from="7.2" to="37.2" begin="Layer_1.click" dur="3s" class="ani" />
<animate xlink:href="#elli1" attributeName="ry" from="0.2" to="4.5" begin="Layer_1.click" dur="3s" class="ani" />
<g id="box1" transform="translate(0, 0)">
<polygon class="st5" points="230.8,307.5 213,307.5 213,307.9 213,314.1 207,314.1 207,307.5 189.2,307.5 188.9,345.4 231.2,345.4
"/>
<path class="st6" d="M207,307.3v-6.9c0-0.2,6-0.1,6-0.1v7.1h17.8l-8-7.1h-26.7l-7,7.1H207V307.3z"/>
<polygon class="st7" points="207,314.1 213,314.1 213,307.9 213,307.5 207,307.5 "/>
<path class="st8" d="M207,300.4v6.9v0.1h6v-7.1C213,300.4,207,300.2,207,300.4z"/>
<animateTransform xlink:href="#box1" attributeName="transform" type="translate" from="0 -70" to="0 0" begin="Layer_1.click" dur="3s" class="ani" />
</g>
</g>
</svg>
</div>
I'm having trouble adding and firing an event listener with javascript on this svg element. Js is at the bottom of the code block. I can set the target ID to a variable no problem. It's attaching an event listener and doing "something" on click/hover that seems to be the issue. The end goal is to show the box when hovering over the dot by adjusting the opacity.
var dot15 = document.getElementById('Dot_15');
var box15 = document.getElementById('Info_Box_15');
dot15.addEventListener('mouseover', function() {
box15.style.opacity = "1";
});
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="777.6px" height="491px" viewBox="607.3 235.5 777.6 491" style="enable-background:new 607.3 235.5 777.6 491;" xml:space="preserve">
<style type="text/css">
.st0{fill:#00A76F;}
.st1{fill:#FFFFFF;}
.st2{font-family:'BarlowCondensed-SemiBold';}
.st3{font-size:14px;}
.st4{font-family:'BarlowCondensed-Medium';}
.st5{font-size:12px;}
.st6{opacity:0.15;fill:#454544;}
#Info_Box_15 {opacity:0}
</style>
<g id="Info_Box_15">
<polygon class="st0" points="1156.7,556.4 1149,548.4 1073,548.4 1073,501.4 1156.7,501.4 "/>
<text transform="matrix(1 0 0 1 1076.6688 516.0011)"><tspan x="0" y="0" class="st1 st2 st3">Gasden</tspan><tspan x="0" y="14" class="st1 st4 st5">Gasden, Alabama</tspan><tspan x="0" y="28" class="st1 st4 st5">89,000 sq. ft.</tspan>
</text>
</g>
<g id="Dot_15" transform="translate(608.399428608477,176.3959312419786)" cursor="pointer">
<path class="st0" d="M548.3,389.1L548.3,389.1c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C544.9,387.5,546.4,389.1,548.3,389.1z"/>
</g>
<g id="Site_x5F_3_x5F_Blue_x5F_Valley">
<g id="Info_box_3">
<polygon class="st0" points="1018.2,467.3 1010.5,459.4 934.5,459.4 934.5,412.3 1018.2,412.3 "/>
<text transform="matrix(1 0 0 1 938.1677 426.9739)"><tspan x="0" y="0" class="st1 st2 st3">BLUE VALLEY</tspan><tspan x="0" y="14" class="st1 st4 st5">Kansas City, KS</tspan><tspan x="0" y="28" class="st1 st4 st5">83,224 sq. ft.</tspan></text>
</g>
<g id="Dot_3" transform="translate(608.399428608477,176.3959312419786)">
<path class="st0" d="M409.8,300L409.8,300c1.9,0,3.5-1.5,3.5-3.5v0c0-1.9-1.5-3.5-3.5-3.5h0c-1.9,0-3.5,1.5-3.5,3.5v0
C406.4,298.5,407.9,300,409.8,300z"/>
</g>
</g>
How to make this animated green bar visible only on circle?
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="38px" height="38px" viewBox="0 0 38 38" xml:space="preserve">
<rect id="bar" y="10.962" fill="#02FF74" width="38" height="14.667">
Link to CodePen
With a clipPath you can create a mask.
you have a to create a <circle> inside a <defs> tag( it doesn't render element inside it and make it accessible )
you have to create a clipPath thate takes sizes and position from the circle using <use xlink:href="#circleID"...
you should add the attribute clipPath="url(#clipPathID)" to any element or group of element you want to mask.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200px" height="200px" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<defs>
<circle id="SVGID_1_" cx="19" cy="19" r="19"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" from="40" to="-15" restart="always" dur="2s" attributeName="y" calcMode="linear" additive="replace" accumulate="none" repeatCount="indefinite">
</animate>
</rect>
<g clip-path="url(#SVGID_2_)">
<path d="M19,4.191c8.166,0,14.809,6.643,14.809,14.809S27.166,33.809,19,33.809S4.191,27.165,4.191,19S10.834,4.191,19,4.191
M19,0C8.508,0,0,8.507,0,19s8.508,19,19,19c10.493,0,19-8.507,19-19S29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309S21.928,24.309,19,24.309S13.691,21.927,13.691,19S16.072,13.691,19,13.691
M19,9.5c-5.246,0-9.5,4.253-9.5,9.5s4.254,9.5,9.5,9.5s9.5-4.253,9.5-9.5S24.246,9.5,19,9.5L19,9.5z"/
</g>
</g>
</g>
</svg>
Just edited to show the animated element just inside the black fill of your circles. The process is the same of the previous example, but now The shape of the mask path has been created copying the d=".." attribute value from both black circles:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="200" height="200" viewBox="0 0 38 38" enable-background="new 0 0 37.833 37.833" xml:space="preserve">
<g>
<g>
<path d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809c-8.166,0-14.809-6.645-14.809-14.809
C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19c10.493,0,19-8.508,19-19
C38,8.507,29.493,0,19,0L19,0z"/>
<g>
<path d="M19,13.691c2.928,0,5.309,2.381,5.309,5.309c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19
C13.691,16.073,16.072,13.691,19,13.691 M19,9.5c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5
c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</g>
</g>
<g>
<defs>
<path id="SVGID_1_" d="M19,4.191c8.167,0,14.809,6.643,14.809,14.809c0,8.167-6.643,14.809-14.809,14.809
c-8.166,0-14.809-6.645-14.809-14.809C4.191,10.835,10.834,4.191,19,4.191 M19,0C8.508,0,0,8.507,0,19c0,10.493,8.508,19,19,19
c10.493,0,19-8.508,19-19C38,8.507,29.493,0,19,0L19,0z M19,13.691c2.928,0,5.309,2.381,5.309,5.309
c0,2.928-2.381,5.309-5.309,5.309S13.691,21.926,13.691,19C13.691,16.073,16.072,13.691,19,13.691 M19,9.5
c-5.246,0-9.5,4.253-9.5,9.5c0,5.247,4.254,9.5,9.5,9.5c5.247,0,9.5-4.254,9.5-9.5C28.5,13.753,24.247,9.5,19,9.5L19,9.5z"/>
</defs>
<clipPath id="SVGID_2_">
<use xlink:href="#SVGID_1_" overflow="visible"/>
</clipPath>
<rect id="bar" y="10.962" clip-path="url(#SVGID_2_)" fill="#02FF74" width="38" height="14.667">
<animate fill="freeze" repeatCount="indefinite" accumulate="none" additive="replace" calcMode="linear" attributeName="y" dur="2s" restart="always" to="-15" from="40">
</animate>
</rect>
</g>
</g>
</svg>
I would like to make it so that when you hover over a nested group #sec7kpi-c and then further into the text inside the animation effect when you mouseover continues.
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363">KPI</text>
</g>
</g>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c"
attributeName="transform"
type="scale"
dur="1s"
from="1"
to="2"
restart="whenNotActive"
begin="mouseover"
calcMode="spline"
values="1;1.5;1"
keyTimes="0;0.5;1"
keySplines=".16,.59,.46,.98;.88,.27,.37,1.52"
fill="freeze"
id="c-hover">
</animateTransform>
You can set the text pointer-events property to none to avoid this.
Note that your keySplines values are invalid (they must all be <= 1) so your animation should not work as written (if it does you should raise a bug on that UA). I've corrected that in my version.
Also I've removed the from and to attributes as they are ignored if you provide a values attribute.
body, html {
width: 100%;
height: 100%;
}
<svg width="100%" height="100%">
<g transform="matrix(1 0 0 1 150 150)" id="sec7kpi">
<g transform="matrix(1 0 0 1 0 0)" id="sec7kpi-c">
<ellipse fill="#372356" stroke="#27AE60" stroke-width="16" stroke-miterlimit="10" cx="0" cy="0" rx="71" ry="71" />
<text id="sec7text" x="-33" y="15" fill="#27AE60" font-family="LatoRegular" font-size="38.8363" pointer-events="none">KPI</text>
</g>
</g>
<animateTransform attributeType="XML"
xlink:href="#sec7kpi-c"
attributeName="transform"
type="scale"
dur="1s"
restart="whenNotActive"
begin="mouseover"
calcMode="spline"
values="1;1.5;1"
keyTimes="0;0.5;1"
keySplines=".16,.59,.46,.98;.88,.27,.37,1"
fill="freeze"
id="c-hover">
</animateTransform>
</svg>
I have the following SVG file.
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="htntp://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="1000"
height="650"
id="svgContainer">
<g
id="truck">
<animate attributeName="fill" from="black" to="red" dur="5s"/>
<path
d="m 655.589,484.36218 -6.18561,-128.61524 -110.99241,-15.79583 -34.55321,-87.58893 -94.74579,0 3.03024,178.75619 -322.238663,2.0203 0.145305,51.22351 z"
id="body"
fill="#000000"
stroke="#000000"
stroke-width="1px"
stroke-linecap="butt"
stroke-linejoin="miter"
stroke-opacity="1" />
<animate attributeType="XML" attributeName="x" to="1000" begin="indefinite" dur="1s" />
<animate attributeType="XML" attributeName="y" to="1000" begin="indefinite" dur="1s" />
</g>
</svg>
</g>
</svg>
I just want to move it to some other place with animation, but it does not work. Is there something that I am missing here? (I want to animate the g element with everything inside. I removed the rest of the elements for the sake of simplicity.)
OK, I changed to animation here with following.
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
from="0,0" to="1000,1000"
begin="0s" dur="1"
repeatCount="indefinite"/>
And it started to work.
UPDATE
I found a better solution. In the first one, after animation my group element is returning to its original position. With the follwing it stays where it is.
<animateMotion
from="0,0" to="500,0"
dur="4s" fill="freeze"/>