Comments (9)
Maybe better:
Vivus.prototype.mapping = function () {
var i, paths, path, pAttrs, pathObj, totalLength, lengthMeter, timePoint;
timePoint = totalLength = lengthMeter = 0;
paths = this.el.querySelectorAll('path');
for (i = 0; i < paths.length; i++) {
// added
if ( "none" === paths[i].getAttribute("stroke") ) continue;
// /added
path = paths[i];
pathObj = {
el: path,
length: Math.ceil(path.getTotalLength())
};
// Test if the path length is correct
....
from vivus.
Hi,
Thanks for these kinds words :)
I have been thinking to a way to ignore some paths but there would be so much rules that I forgot the idea. Because stroke='none'
could be the marker to ignore a path, but in this case I should also think about path which aren't visible (display: none
, opacity: 0
, parent elment not visible too..).
So I was thinking to use a simple attribute to set in the path element to ignore. Something like data-vivus-ignore
. I'm open to suggestions for this one :)
I put your ticket as improvement. I can't promess to implement it soon, I have proper bugs to fix first :-S
from vivus.
If we can find a good way to implement it, i don't mind making a PR with the implementation.
What about:
Vivus.prototype.mapping = function () {
var i, paths, path, pAttrs, pathObj, totalLength, lengthMeter, timePoint;
timePoint = totalLength = lengthMeter = 0;
paths = this.el.querySelectorAll('path');
for (i = 0; i < paths.length; i++) {
// added
if ( this.isInvisible(paths[i])) continue;
// /added
path = paths[i];
pathObj = {
el: path,
length: Math.ceil(path.getTotalLength())
};
With:
Vivus.prototype.isInvisible = function () {
// if attr data-vivus-ignore exists and is set to true
// return true
// If attr data-vivus-ignore exists and is set to false <- gives more control to the user
// return false
// if attr stroke is set to none
// return true
// if inline style containts display:none || visibility:hidden || || opacity:0
// return true
// return false
}
It's clearly not perfect but it's already an on the current state, don't you think ?
If we want to handle parent visibility i guess we will need to have a recursive mapping function on the svg childNodes tree.
from vivus.
That's definitly better.
from vivus.
about the children stuff we could check inside the isInvisible method if the current element is not visible and if so, mark all children with data-vivus-ignore="true", example:
Vivus.prototype.mapping = function () {
var i, paths, path, pAttrs, pathObj, totalLength, lengthMeter, timePoint;
timePoint = totalLength = lengthMeter = 0;
paths = this.el.querySelectorAll('path');
for (i = 0; i < paths.length; i++) {
// added
if ( this.isInvisible(paths[i])) {
var childNodes = paths[i].childNodes;
if ( childNodes.length > 0 ) { // mark all children of current element as to be ignored
for ( var j = 0; j < childNodes.length; j++ ){
j.setAttribute("data-vivus-ignore", true)
}
}
continue;
}
// /added
path = paths[i];
pathObj = {
el: path,
length: Math.ceil(path.getTotalLength())
};
from vivus.
ups, typo mismatch.... should be:
...
childNodes[j].setAttribute("data-vivus-ignore", true);
...
from vivus.
To be honest I'm really confused about what to do in this case. There's no reliable way to know if a shape is visible or not (parent visible or not, and class styling). But I think we should focus on the most common usecases. Usually there no class styling for an SVG, they usually come freshly out from Illustrator or Inkscape. So I would try your code @morgangiraud (which simple and clean, brilliant) but with a little change:
For example, a SVG exported from Illustrator might look like this:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="40px" height="40px" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
<circle fill="none" stroke="#000000" stroke-miterlimit="10" cx="16.26392" cy="15.48047" r="11.72144"/>
<g display="none">
<circle display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" cx="24.3811" cy="22.89746" r="11.09155"/>
<circle display="inline" fill="none" stroke="#000000" stroke-miterlimit="10" cx="24.10132" cy="15.33984" r="8.15259"/>
</g>
</svg>
So usually we choose to not display a complete group. With this recursive trick, we can check the parents. It's not optimal in term of performances but it's only done when the SVG is ready and not between each frame.
Vivus.prototype.isInvisible = function (el) {
if attr data-vivus-ignore exists and is set to true
return true
if attr stroke is set to none
return true
if inline style containts display:none || visibility:hidden || opacity:0
return true
if (this.el !== el)
return this.isInvisible(el.parentNode);
else
return false;
}
from vivus.
I think I found something to help :
function isHidden(el) {
return (el.offsetParent === null)
}
http://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom
I need some more tests but it should help to check if an element is visible. It works if the parent element is not visible. But you perfectly fit in @morgangiraud comment.
I'll push some updates here tonight, based on @morgangiraud PR #48
from vivus.
For now the method I have look like this: (fork from #48)
Vivus.prototype.isInvisible = function (el) {
var ignoreAttr = el.getAttribute('data-vivus-ignore');
if (ignoreAttr !== null) {
return ignoreAttr !== 'false';
}
return (this.ignoreInvisible && el.offsetParent === null);
};
this.ignoreInvisible
would be a new option (boolean, default true
) to let developer choose if they want to enable the option to ignore invisible paths.
But where are the checks about
opacity
andstroke
?
Well, not that I don't want them, they are really relevant but won't work in all cases. If the style is applied via a CSS rule we won't be able to detect it. We can only check the attribute or inline style on the element. It's a shame. But if we have a good way to check if the element is visible, which is a big improvement.
from vivus.
Related Issues (20)
- Trigger SVG to draw as soon as you see it (very large SVG) HOT 1
- Include Start delay without Loop HOT 3
- Is vivus deprecated? HOT 1
- daisy-chaining a series of images? HOT 2
- Beginner, unable to use HOT 8
- Support for Play Pause HOT 4
- Vivus MAP Array Empty, no animation rendered. HOT 2
- Problem using stroke based mask using multiple time the same SVG file
- Is there any rewind too?
- [Feature Request] Animate individual paths HOT 2
- [Error Fix]: There is a grammatical error on the index page. HOT 2
- Text is drawing immediately HOT 2
- Is there any option to draw svg on scroll? HOT 1
- No "ease-in-out" timing function? HOT 3
- Move a pencil while drawing ? HOT 1
- Integration with vue 3? HOT 4
- Callback function for when a path is completed? HOT 1
- Animation automatically replay
- Not working for a simple test HOT 2
- Please add Shuffle/Random animation type to Vivus
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vivus.