How to make SVG path animation work on safari? - ios

Question

I am doing svg path animation in it works fine in all browsers except safari and IE
svg example
<svg
v-if="waveid == 6"
class="gotthard-red-pipe"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 732.36 411.6"
>
<g id="Ebene_2" data-name="Ebene 2">
<g id="Ebene_20" data-name="Ebene 20">
<rect class="bg-transparent" width="732.36" height="411.6" />
</g>
<g id="_2._Roehre" data-name="2. Roehre">
<g id="_2._Roehre_right_to_left" data-name="2. Roehre right to left">
<g id="_2_Roehre_bg" data-name="2_Roehre_bg">
<path
:id="'wave' + waveid"
filter="url(#innershadow)"
class="gothard-p3"
stroke="url(#img1)"
d="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
/>
</g>
<g style="transform: translateY(-55px);">
<foreignObject
width="30"
height="80"
transform="translate(-12 -24)"
>
<div class="valueSpan-wrapper">
<div
xmlns="http://www.w3.org/1999/xhtml"
class="valueSpan"
:id="'valueSpan' + waveid"
></div>
</div>
</foreignObject>
<animateMotion
:id="'motion' + waveid"
dur="1s"
:repeatCount=" percentageCustom / 100"
fill="freeze"
path="M665.66,139.6c-10.77,15.38-14.62,23.6-28.93,31s-70.26,35-137.92,60.48c-70.41,26.55-98.59,29.81-110.42,31.78a77.71,77.71,0,0,1-21.51-.82s-120.55-24.63-130.07-26.44a195.88,195.88,0,0,1-22-6.07S113,190.15,100,187.36s-30,.95-30,.95"
></animateMotion>
</g>
</g>
</g>
</g></svg
this code is done in vue.js
Problem is in Foreign object, it should animate on path which is same d = path in animateMotion, repeat count make path move in value what user set up in craftcms
css
.gotthard-blue-pipe,
.gotthard-green-pipe,
.gotthard-red-pipe {
position: absolute;
width: 100%;
left: 50%;
transform: translate(-50%, 0);
}
.textContainer {
width: 90%;
}
.z1{
position: absolute;
z-index: 999;
}
.z2{
position: absolute;
z-index: 998;
}
.valueSpan-wrapper{
width: 100%;
height: 100%;
position: relative;
}
.valueSpan {
position: absolute;
background-color: white;
border: 1px solid $color4;
padding: 2px;
transform: skew(15deg, 320deg) rotate(15deg);
z-index: 99;
color: #4b4d53;
font-weight: 600;
width: 30px;
font-size: 8px;
text-align: center;
bottom: 30px;
left: 0 !important;
.stand {
height: 1px;
width: 50px;
background: #87888d;
position: absolute;
transform: rotate(90deg) translateX(28px) translateY(25px);
}
}
is it possible to animate foreign object with this way also in safari or I have to use different approach?