Context: I'm working on an infographic in SVG. I want to have the document come to life thanks to animations, especially by chaining animations. I'm already familiar with SVG but started learning SVG animation only recently.
Since SMIL is deprecated, I'm trying to produce animations in pure SVG.
Looking at this article (esp. the Handy Dandy Replacement Reference Chart at the end), I'm under the impression that I need to stop using suc hattributes:
fill="freeze"
repeatCount="indefinite"
begin="hover"
begin="circ-anim.begin + 1s"
…because they are part of SVG SMIL.
But, if I look at the SVG reference on Mozilla, I see <animate> and <animateTransform> inside the list, with no warning about them being SMIL, or the need to stop using them.
Moreover, it seems Chrome normally warns against the use of SMIL animations in the console but I can see no such warning when using <animate> or <animateTransform> (be it in an SVG document, or inside an HTML document that includes an inline or object SVG.)
Long story short, it's not clear to me what is SMIL and what is pure SVG. Can anyone shade some light on the topic? Can I use <animate> and <animateTransform>?
SMIL is no longer deprecated by Chrome.
We value all of your feedback, and it's clear that there are use cases serviced by SMIL that just don’t have high-fidelity replacements yet. As a result, we’ve decided to suspend our intent to deprecate and take smaller steps toward other options.
Basically SMIL in SVG is everything in the Animation chapter of the specification.
That's the <animate> element, the <set> element, the <animateMotion> element and the <animateTransform> element. (the SVG specification also contains an <animateColor> element which should not be used, you can just replace that with animate).
Related
I'm trying to draw an axis on a canvas using D3 functionality (as exampled here https://www.tutorialsteacher.com/d3js/axes-in-d3). However every example I've seen is using an SVG while I wish to use canvas. On the other hand I didn't see any indication, in their documentation or elsewhere, that it can't be done in canvas.
Is it possible? If so, how?
In short: no, that's not possible.
D3 is pretty much render agnostic, meaning it can be used to create SVG, Canvas, other HTML elements etc. However, some modules are indeed quite specific, and that's the case of d3-axis.
If you have a look at d3-axis source code you'll see that it append SVG <path>, <line> and <text> elements for creating the axis. For instance:
path.enter().insert("path", ".tick")
Finally, here you have a discussion on this subject, where Bostock (D3 creator) abandons the idea of modifying the d3-axis module for creating axes on HTML canvas.
I am planing use d3.js to display a network diagram. But while going through the documentation I am feeling we cannot customise the nodes using custom html template as it is SVG. am I correct?. But still my question is d3.js tells D3 helps you bring data to life using HTML, SVG and CSS, means html also used for rendering the networks. So can I use my custom html for nodes if it uses html to render?
Because I needed a network diagram that required some multiline text, it was much easier (and more supported by browsers) to use absolute-positioned DIV elements for the nodes, and then use a background SVG layer to draw the edges between them.
I haven't had a lot of luck getting foreign object to work properly across all browsers.
D3 does not constrain your rendering technology at all. You can certainly use SVG, HTML, or both. I'm not sure how you're planning to create your network diagram, but presumably it will be using SVG at the overall diagram level. (I can't think of a decent way to show connections in pure HTML.) If that is the case, you'll have to embed HTML within the overall SVG. That's possible, see here, and D3 fully supports it.
I have a map where clicking an area to zoom in works in FireFox, but not in Chrome, Opera and Safari.
The map can be viewed at http://tcan.ca/content/tcan-neighbourhood-members
Anyone have suggestions about what can be causing this?
You can't use transformations directly on the <svg> element in webkit -- and even on other browsers, it won't always do what you expect.
A top-level <svg> element is positioned on the webpage as an HTML object (similar to a <div>). Transformations that apply to it are interpretted as HTML/CSS transformations. The CSS transformation syntax is still not finalized and webkit browsers only support a prefixed -webkit-transform version.
Rather than deal with multiple transformation syntaxes, add a <g> element inside your <svg>, append all your graphical content within the <g>, and then declare your SVG transformations on the <g>. It will work in all the browsers that support SVG.
I'm setting up an experimental html5 website using canvas.
I am drawing 3 circles all next to each other and all I want to know is how to be able to select them.
I'd like them to become links, in a way. Not tags, since everything's gonna be created using javascript.
Something like kinetic JS : http://www.kineticjs.com/, but without the extra library.
I have found some scripts that are using ghost canvas and contexts, but the examples are for dragging and stuff. I only want to be able to select my shape and execute some code.
Thank you!
I am thinking you might want to look into the IsPointInPath() method. It will help you figure out whether or not the mouse clicked on your canvas object.
See Detect mouseover of certain points within an HTML canvas?
if you are talented in xml i suggest you to use canvas + SVG (http://www.w3schools.com/svg/)
And follow this simple example.
http://jsvectoreditor.googlecode.com/svn/trunk/index.html
regarding to SVG and Canvas , the differences are obvious, as you can load bitmaps in SVG, and you can draw lines using the canvas API. However, creating the image may be easier using one technology over the other, depending on whether your graphic is mainly line-based or more image-like.
Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?
I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).
It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?
Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.
For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.
IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.
(BTW, animateTransform on Chrome is broken - it miscalculates the translations)
I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil but no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:
isAndroid = /Android/.test( navigator.userAgent );
Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...
Modernizr detects support for SVG animation (SMIL).
Without the complete example it's impossible to say for sure what's causing the differences.