Inconsistent SVG Rendering between Chrome / Firefox
I'm working with animated SVGs / Snap.svg for the first time, so please forgive my lack of knowledge on this subject.
I made a series of 3 animated SVG "frames" (400x300px), each nested within a larger SVG (1200x300px) to contain them all. A div element with a clip style property hides the other two "frames" when they're not ready to be shown.
Using Snap.svg, each frame is supposed to "slide" into view using translate after a certain amount of time, and within each frame are some animated elements.
Long story short: the animation looks perfect in Firefox, but it looks awful in Chrome/Webkit. In Chrome, it looks like each of the frames are just being stacked on top of each other instead of side-by-side.
In addition, two of the elements (the cow circle joules and the graph circle graph ) are rendering in the upper-left corner instead of using their translate property to position them in the center-right area.
You can see the animation in Plunker. Please try it out in both browsers to see what I mean.
http://plnkr.co/UhTy83
Firefox GIF screen capture:
Chrome GIF screen capture:
Thanks Ian in the comments to my question! Swapping out the <svg> tags for <g> (group) tags fixed this problem. It's interesting to me that Firefox allows you to transform <svg> elements but Webkit does not.
Before:
<svg class="slides" width="1200" height="300">
<svg class="slide1" width="400" height="300"></svg>
<svg class="slide2" width="400" height="300"></svg>
<svg class="slide3" width="400" height="300"></svg>
</svg>
After:
<svg class="slides" width="1200" height="300">
<g class="slide1"></g>
<g class="slide2"></g>
<g class="slide3"></g>
</svg>
上一篇: 有什么方法将SVG渐进式绘制转换为视频？