.svg-container(
:class="{ 'canvas-mode': mode === 'animate', 'hero-mode': mode === 'hero' }"
)
svg.kanji-svg(
v-show="!loading"
viewBox="0 0 109 109"
)
g(v-if="mode === 'animate'")
path.stroke-ghost(
v-for="(stroke, i) in strokes"
:key="'ghost-'+i"
:d="stroke.d"
)
g(v-for="(stroke, i) in strokes" :key="i")
path.stroke-path(
:d="stroke.d"
:class="getStrokeClass(i)"
:style="getStrokeStyle(stroke)"
)
g(v-if="mode === 'animate' && (!isPlaying || currentStrokeIdx > -1)")
g(v-for="(stroke, i) in strokes" :key="'anno-'+i")
g(v-show="!isPlaying || currentStrokeIdx >= i")
path.stroke-arrow-line(
v-if="isPlaying && currentStrokeIdx === i && stroke.arrow"
d="M -7 0 L 2 0 M -1 -3 L 2 0 L -1 3"
:transform="getArrowTransform(stroke.arrow)"
)
g.stroke-badge-group(
v-if="stroke.start"
:transform="`translate(${stroke.start.x}, ${stroke.start.y})`"
)
circle.stroke-badge-bg(r="4")
text.stroke-badge-text(
dy="0.5"
) {{ i + 1 }}
button.play-btn(
v-if="mode === 'animate' && !loading && !isPlaying"
@click.stop="playAnimation"
)
svg(viewBox="0 0 24 24" fill="currentColor")
path(d="M8,5.14V19.14L19,12.14L8,5.14Z")