Closed thommeo closed 6 years ago
@thommeo Can you show me your SVG file or an example?
I think you should use css animation
@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>`
}
})
Fixed in v3.0.0
Context
bin/svg.js
script edits the ID's in the original SVG files and makes them to match formatsvgicon-{path-to-file-}{name}-{originalID}
. E.g.svgicon-search-a
ID can be used in the
animate
tag inbegin
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