Comments (4)
Thanks for your note! It looks like scoped was dropped from the HTML spec around January:
whatwg/html#552
Unfortunately, without some kind of scoping, it's no longer possible to include multiple animations on the same page without their CSS conflicting with each other. I thought about including the character in the animation names so that at least different characters would have separate CSS rules, but that kind of fix is a poor band-aid that could cause a site to break if it tried to render, say, 妈妈.
Having multiple animations on the same page will require some custom Javascript until HTML supports better scoping than it does currently. If you have any ideas, I'd be happy to hear them!
from makemeahanzi.
Even if it is not absolutely required, it is a good idea to give a unique name to css data (and also to tag identifiers).
About the possible conflicts, it depends of the way you include svg files in your pages. If you include svg files as is (using for instance the php "include" instruction), css names (and also tag identifiers) have to be all different, otherwise the result is impredictable. But if you include svg files using embed (or iframe) tags, there is no conflict because css names and tag identifiers of svg will not be visible at the page level. See http://gooo.free.fr/animCJK/test/visibility.php for a sample.
Anyway, in all cases, you have to change animation-delay values or to delay animation using javascript.
So i include svg using php that reads svg files, and modifies their contents (css names, tag identifiers and animation delays) before including them in the page. See http://gooo.free.fr/animCJK/test/several.php for a sample.
Note 1: i don't use your svgs but a simplified version of them (i prefer to use a constant animation duration for all strokes, so that simplifies a lot the code). I also changed median lists, svg tags (use of def tag), css and identifier names (add of the prefix hvg+decimal code of the character).
Note 2: the php code of visibility.php and several.php is very simple (roughly 20 lines of code which read, parse and replace data in svg files), but i can provide them if you want.
from makemeahanzi.
You're absolutely right that its important to have unique ids for all of these CSS rules. My point was just that I can't provide those in the SVG files alone, since the user might want to include the same character twice on a page with different offsets. A solution like your ID renaming code is what I had in mind, but the iframe approach is new to me. Thanks for the tip!
I think the main takeaway for me is that it would be nice to include a small Javascript that does what my animation library and your PHP code do. For example, it could take a DOM element, a delay, and the character data, and render a character animation there with a unique ID. That would make it much easier for people to include this stuff if all they want are animations.
from makemeahanzi.
Well! Try this one: http://gooo.free.fr/animCJK/test/jsInSvg.php
In the calling page, one only need something like <iframe src='nnnnn.svg'></iframe>
.
A javascript included in every svg does the rest (same code for all svg). No php required, and no javascript in the calling page.
from makemeahanzi.
Related Issues (20)
- 试用了一下,小程序报eval安全策略的错误
- 如何创建不存在的汉字,让我们一起做贡献吧 HOT 10
- adopt for Dart and Flutter HOT 3
- The radical of "平" is wrong
- All this data is for simplified or traiditional Characters?
- Could you update this branch tool meteor version
- 翰 The stroke sequence is wrong
- Wrong stroke order for 隨
- 葉 stroke order
- How do other sites draw so many characters that aren't in these dictionaries? HOT 2
- Fill the stroke with a color gradient based on the stroke animation direction HOT 1
- What's the logic behind the ordering of the two files? HOT 1
- Missing strokes for 齁 嘡 藠 嗞 馃 瘆 拃 揳 齉 抔
- The number of strokes in Chinese character classification
- Any method to draw strokes with python instead of web page?
- 如何添加英文字母,或者数字的数据呢?~~~用工具貌似无法进行下一步 HOT 3
- 大佬们,这个项目如何启动啊,想修改部分汉字的笔画顺序,有没有办法啊
- How should I cite this work? HOT 2
- 如何判断是否支持某个汉字? HOT 1
- Can't run makemeahanzi-tool, told me certificate has expired HOT 2
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 makemeahanzi.