Как убрать объект в левом верхнем углу до начала анимации animateMotion?

Данный вопрос инспирирован ответом. Красный круг находится в левом верхнем углу до начала анимации animateMotion.
Ниже пример кода:



xmlns:xlink="http://www.w3.org/1999/xlink" height="160" width="360" >

d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />



id="forward"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0 1"
keyTimes="0 1"
calcMode="linear" >


id="middle"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0.5 1"
keyTimes="0 1"
calcMode="linear" >


id="back"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="1 0"
keyTimes="0 1"
calcMode="linear" >






var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement()
}
var animation2 = document.getElementById("middle")
function middleSVG(){
animation2.beginElement()
}

var animation3 = document.getElementById("back")
function backSVG(){
animation3.beginElement()
}


Я пытался спрятать красный круг за пределы холста перемещением его влево cx="-18". Но это не помогло, красный круг стал перемещаться во время анимации выше пути.



xmlns:xlink="http://www.w3.org/1999/xlink" height="160" width="360" >

d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />



id="forward"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0 1"
keyTimes="0 1"
calcMode="linear" >


id="middle"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="0.5 1"
keyTimes="0 1"
calcMode="linear" >


id="back"
dur="2s"
begin="indefinite"
repeatCount="1"
keyPoints="1 0"
keyTimes="0 1"
calcMode="linear" >






var animation1 = document.getElementById("forward")
function forwardSVG(){
animation1.beginElement()
}
var animation2 = document.getElementById("middle")
function middleSVG(){
animation2.beginElement()
}

var animation3 = document.getElementById("back")
function backSVG(){
animation3.beginElement()
}


Как добиться исчезновения круга из левого верхнего угла холста SVG до начала анимации?
UPDATE 16.12.2019
Благодарю всех, кто откликнулся на решение фундаментальной проблемы SVG.

Но у каждого решения, на мой взгляд, есть те или иные недочёты:
Решения с помощью команд SVG: viewBox, translate имеют ограничения по размерам холста. При других размерах возможна подрезка траектории движения или объекта движения. Решения JS имеют объемный код и вмешиваются в процесс анимации SVG
Смотрите в сторону сокрытия шарика до начала анимации средствами CSS,JS
Код должен быть минимальным по объему и быть универсальным при любых значениях холста SVG. Принимаются дополнительные ответы в новых постах, от тех участников, которые уже ответили. А также приветствуются новые ответы от новых участников.

Ответ
в лоб


class SvgAnimation {
constructor(node) {
this.node = node

if (!this.node) return

this.controls = this.node.querySelector('.controls')
this.svg = this.node.querySelector('svg')

this.onControlClick = this.onControlClick.bind(this)

this.controls.addEventListener('click', this.onControlClick, false)
}

onControlClick(e) {
const button = e.target.closest('.btn')

if (!button) return

const animationName = button.getAttribute('data-animation')

if (!animationName)
throw new Error('Missing required parameterm data-animation')

const animationDur = +button.getAttribute('data-duration') || 2

if (isNaN(animationDur))
throw new Error('data-duration property should be number value')

this.startAnimation(animationName, animationDur)
}

startAnimation(animationName, animationDur) {
const animation = document.querySelector(`[data-animation-name=${animationName}]`)

if (!animation)
throw new Error(`Cannot found animation with '${animationName}' name`)

animation.setAttribute('dur', animationDur + 's')

this.svg.classList.add('animate')

animation.beginElement()

setTimeout(() => {
this.svg.classList.remove('animate')
}, animationDur * 1000)
}
}

const root = document.querySelector('.container')

new SvgAnimation(root) svg circle {
opacity: 0
}

svg.animate circle {
opacity: 1
}