Animation `begin` attribute doesn't work with dashes added by `bin/svg.js`

[thommeo]

Context

bin/svg.js script edits the ID's in the original SVG files and makes them to match format svgicon-{path-to-file-}{name}-{originalID}. E.g. svgicon-search-a

ID can be used in the animate tag in begin attribute, e.g. to tell the animation to start after another animation: begin="another_animation_id.end"

Problem

Accordingly to begin attribute specification, characters - and + are interpreted to define an offset to the specified event. E.g. begin="another_animation_id.end + 2s"

Thus a construction like begin="svgicon-search-a.end" doesn't work. The dashes have to be either escaped (begin="svgicon\-search\-a.end") or replaced in the ID itself.

Possible Solution

Possible solution would be to replace the dashes with underscores in the bin/svg.js

[Allenice]

@thommeo Can you show me your SVG file or an example?

[Allenice]

I think you should use css animation

[thommeo]

@Allenice I can't use CSS animation for mask and stroke animations.

Here is SVG:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">

    <title>sucess-curves</title>
    <defs>
        <mask id="mask-circle">
            <rect cx="0" cy="0" width="64" height="64" style="fill:#fff; stroke: none;" />
            <circle cx="32" cy="32" r="32" style="fill: #000; stroke: none;">
                <!-- http://easings.net/#easeInQuint -->
                <animate attributeName="r"
                    id="maskcircle_anim"
                    begin="0s" dur="500ms" fill="freeze"
                    calcMode="spline" keySplines="0.755, 0.05, 0.855, 0.06"
                    values="32; 0"
                    keyTimes="0; 1"
                />
            </circle>
        </mask>
    </defs>

    <!-- filled circle -->
    <g mask="url(#mask-circle)">
        <circle cx="32" cy="32" r="30.5" style="fill:#23d160;stroke:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px"/>
    </g>

    <!-- checkmark -->
    <polyline points="13.82 31.34 27.73 45.25 50.4 22.59" style="fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:3px; stroke-miterlimit: 10; stroke-dasharray: 59 1000; stroke-dashoffset: 59;">
        <!-- http://easings.net/#easeOutExpo -->
        <animate attributeName="stroke-dashoffset"
            id="check_anim_in"
            begin="maskcircle_anim.end" dur="1000ms" fill="freeze"
            calcMode="spline" keySplines="0.19, 1, 0.22, 1"
            values="100; 0"
            keyTimes="0; 1"
        />
    </polyline>
</svg>

Here is what I have after my patch. It works.

/* eslint-disable */

var icon = require('vue-svgicon')
icon.register({
  'success-animated': {
    width: 16,
    height: 16,
    viewBox: '0 0 64 64',
    data: `<defs><mask id="svgicon_a"><path pid="0" _fill="#fff" d="M0 0h64v64H0z"/><circle pid="1" cx="32" cy="32" r="32"><animate attributeName="r" id="svgicon_b" begin="0s" dur="500ms" _fill="freeze" calcMode="spline" keySplines="0.755, 0.05, 0.855, 0.06" values="32; 0" keyTimes="0; 1"/></circle></mask></defs><g mask="url(#svgicon_a)"><circle pid="2" cx="32" cy="32" r="30.5" _fill="#23d160"/></g><path pid="3" _fill="none" _stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="59 1000" stroke-dashoffset="59" d="M13.82 31.34l13.91 13.91L50.4 22.59"><animate attributeName="stroke-dashoffset" begin="svgicon_b.end" dur="1000ms" _fill="freeze" calcMode="spline" keySplines="0.19, 1, 0.22, 1" values="100; 0" keyTimes="0; 1"/></path>`
  }
})

[Allenice]

Fixed in v3.0.0