Skip to content
This repository has been archived by the owner on Apr 26, 2024. It is now read-only.

stroke-dashoffset svg animation #6102

Open
riki81 opened this issue Sep 14, 2015 · 1 comment
Open

stroke-dashoffset svg animation #6102

riki81 opened this issue Sep 14, 2015 · 1 comment

Comments

@riki81
Copy link

riki81 commented Sep 14, 2015

Hi, it seems that there are problems with "stroke-dashoffset, used to animate SVG.

I am using this script combined with jQuery.Keyframes. It's working perfectly on Firefox and Chrome, but with Safari I've got serious problems. Nth is working.

The code from jQuery.Keyframes is:
$.keyframe.define({
name: data_name,
to: {
'stroke-dashoffset': stroke_dashoffset
},
});

The code supposed to be generated is sth like this:
@-webkit-keyframes data_name {
to {
stroke-dashoffset: 200;
}
}

@Keyframes data_name {
to {
stroke-dashoffset: 200;
}
}

What's the problem?
I've made the same question to guys from jQuery.Keyframes, just to understand where the problem is situated.
For my little knows, problem is inside PrefixFree, 'cause jQuery.Keyframes is doing its work correctly.

@pygy
Copy link
Contributor

pygy commented Jan 8, 2016

What Safari version are you using? In v9, stroke-dashoffset is unprefixed, which makes it unlikely that PrefixFree is to blame. Perhaps Safari is bad at this?

[].indexOf.call(getComputedStyle(document.documentElement, null), 'stroke-dashoffset')
// 293
'strokeDashoffset' in getComputedStyle(document.createElementNS('path', 'svg'), null)
// true

Yes, getComputedStyle() returns an array when querying document, but an object when querying SVG elements...

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants