I would like to add tooltips (or hovering behavior) on SVG diagrams generated by diagrams.
Is there a way to add custom properties to a diagram , or worst comes to the worst be able to set and id to things, so they can be referred to in Javascript.
The question is slightly misleading because the title property that gives tooltips on SVGs in browsers is not an attribute, but an element of its own. You add tooltips, that is SVG titles, with the method svgTitle in Diagrams.Backend.SVG.
The same module also contains methods svgID and svgClass to add these attributes to allow external javascript to find specific SVG elements.
I kept googling, and havn't tried it yet, but I found this. It seems to exist to exactly satisfy your need.
It is SVG backend only.
Related
For CustomElements I can do this:
class MyElement extends HTMLElement {}
Can I do the same for SVG Elements? like
class MyOwnRectangle extends SVGRectElement {}
If it works, can I trouble someone for a jsbin?
If not, why not?
This has some very good use cases like being able to store model data in the element itself. SVG manipulation is basically used in 2 major areas:
Animations
Diagrams like ER, Organisation Charts, Process flows etc.
A library like JointJS has its own abstractions in the form of classes (which extends a Backbone View) to store model data associated with the view (SVG diagrams on screen).
Like WebComponents can eventually replace jQuery Plugins, Framework X's components in a standard way, why not do the same for SVG?
Finally,
How is Polymer 0.5 able to do this?
Does Polymer.js support inner SVG elements?
How is this patch able to do this in Polymer 1.0?
https://github.com/Polymer/polymer/pull/3372
What is the alternative for now?
I guess we can extend HTMLElement. In our ShadowDOM use an <svg> element and then attach all the SVG tags we actually want to extend like <rect>, <polyline> etc! Perhaps a much cleaner way out of this?
Will this be implemented in the future?
According to the specification
If result’s namespace is not the HTML namespace, then throw a NotSupportedError.
All SVG elements are in the SVG namespace. So the specification precludes support.
Ways to store data in SVG include the the <metadata> tag and data- attributes.
I am using draw2d javascript library for drawing predefined shapes and custom shapes in it's canvas.
As I don't have any example made yet, I am trying to copy from it's documentation but doesn't seem to find a good way to research it as it contains a whole lot of it.
Here is the circle example.
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.shape.basic.Circle
and here are some more documentation with examples.
http://www.draw2d.org/draw2d_touch/jsdoc_6/
I have premade shapes with html and css and I am trying to drag and drop and render them on canvas like these in this image. Also when dropped, they should have input and output ports too.
Is it possible to convert this html/css to draw2d shapes?
So here this is made possible via extending draw2d's SVGFigure and thus we have ability to provide custom svg to render it as a custom shape.
Below links were useful in this context.
http://www.draw2d.org/draw2d_touch/jsdoc/#!/guide/extending_svg_figure-section-live-example
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_svg
http://www.draw2d.org/draw2d_touch/jsdoc_6/#!/api/draw2d.SetFigure
https://github.com/freegroup/draw2d/tree/master/examples/shape_labeld
https://github.com/freegroup/draw2d/tree/master/examples/shape_custom_markdown
Similarly to this forum thread, I'm getting a NullPointerException when exporting a graph to SVG. It doesn't happen with all graphs, but once it happens for a particular graph, no amount of closing and re-opening the .gephi file will let me export.
Unlike the forum thread, getting rid of spaces in node labels doesn't help me. In the log file, there's a very suspicious line:
***** CSSEngine: exception property.syntax.error:org.w3c.dom.DOMException: The "stroke-width" property does not support dimension values.
AttrValue:3.7186165E-4
Exception:org.w3c.dom.DOMException
Since SVG is all about web pages, this looks like a plausible issue. This forum post seems relevant. Here's a quote from it:
Batik is correct in rejecting the content, although it is a bit
confused in the error message. 'stroke-width' is a CSS property and
as such can not use scientific notation, as you quoted (silly yes, but
that is what CSS2 has said for a long time). The error comes because
Batik is trying to interpret 'e-03' as a unit (like 'em' for example).
Any thoughts on how I can export my beautiful Gephi image to SVG?
The number values in SVG properties (as with CSS properties) do not support scientific notation.
The error message indicates that somewehere in your file you have that stroke-width value (3.7186165E-4).
This is obviously a bug in the gephi SVG exporter. You should report it to them.
In the meantime you could fix it with a text editor. In the above example you would need to find the element with:
stroke-width="3.7186165E-4"
and change it so that it doesn't use scientific notation:
stroke-width="0.00037186165"
Note that if there is one, there may be others. Hopefully not too many! Note that other occurrences may not necessarily be on a stroke-width attribute.
In HTML5, elements can have arbitrary metadata stored in XML attributes whose names start with data- such as <p data-myid="123456">. Is this part of the SVG spec too?
In practice this technique works fine for SVG docs in many places. But I'd like to know if it's part of the official SVG spec or not, because the format is young enough that there's still a lot of incompatibility between browsers, especially in mobile. So before committing to code I'd like know if I can expect future browsers to converge on supporting this.
I found this message from the working group mailing list saying they "expect [they] will" support it. Did this become official?
While other answers are technically correct, they omit the fact that SVG provides an alternative mechanism for data-*. SVG allows any attribute and tag to be included, as long as it doesn't conflict with existing ones (in other words: you should use namespaces).
To use this (equivalent) mechanism:
use mydata:id instead of data-myid, like this: <p mydata:id="123456">
make sure you define the namespace in SVG opening tag, like this: <svg xmlns:mydata="http://www.myexample.com/whatever">
EDIT: SVG2, currently W3C Candidate Recommendation (04 October 2018), will support data- directly (without namespaces, the same as HTML). It will take some time before the support is widespread though. Thanks #cvrebert for pointing this out.
The data-* attribute is part of HTML5. It’s not a generic XML attribute.
The current SVG W3C Recommendation is SVG 1.1 (from 2011-08). It doesn’t allow this attribute, as you can check in the attributes list.
The same is the case for the SVG 2 Working Draft (from 2012-08). Update (2015): It seems that it’s intended to support data-* attributes in SVG 2 (currently still a Working Draft).
data-* attributes on SVG elements are officially supported in the current draft of SVG2. See:
w3c/svgwg commit 1cb4ee9: Added SVGElement.dataset and allowed data-* attributes on all SVG elements.
ACTION-3694: Add "data-*" attributes notes to spec. (Created on: January 15, 2015)
RESOLUTION: We will reserve "data-*" attributes to be used in SVG content. The API for handling them is on Element. (from SVG WG Telecon on 15-Jan-2015)
https://lists.w3.org/Archives/Public/www-svg/2014Dec/0022.html
there is a more general mechanism.
svg supports desc elements which may contain arbitrary xml from other namespaces. link instances of this elements or child nodes from you own namespace by dependent ids or refid attributes.
this is the relevant part of the spec (5.4).
My objective is to generate a graphic layout (made of Richfaces components) based on some input configuration (like an XML file) and display it in my web app. The layout is composed of graphic symbols representing various entities in the system: each symbol should be mapped to an entity in the system, in order to display its state. The XML configuration file is used to define the symbol connections and positions within the layout, and their mapping rules to an entity. How can I achieve this?
I was thinking to create a symbol library in a technology such as SVG, where you can define both the aspect and the behaviour, and then simply "wrap" each SVG symbol in a dynamically created richfaces component, which would allow me to handle both the user interactions and the mapping rules defined in the symbol. Unfortunately JSF/Richfaces don't support SVG images, therefore I would have to use plain HTML without Richfaces features.
Another way to achieve that would be to simply define generic symbols in the XML file, each one of them with an attribute specifying the related image, the mapping rule, etc., and then generate the corresponding richfaces component from within the web-app. By doing so, would I be able to then display all the symbols in the right position and therefore generate the complete dynamic layout?
Could you suggest a better approach? Thank you very much.
I believe that HTML5 has direct support for SVG images, however it is still an embedded object in regular HTML after all. This too is something I have been waiting for however I don't believe any of the current JSF2 component libraries have an offerring for this yet.
Here is a good explanation of a possible workaround:
Getting started with SVG graphics objects in JSF 2.0 pages
Potentially you could build a custom facelet component utilizing this workaround?
My thought though is that when your only tool is a hammer, everything looks like a nail. I would try to utilize an RIA (Rich Internet Application) technology better suited for display and manipulation of vector graphics like HTML5, Flash+Flex, Silverlight, etc..