Converting html to svg using javascript/jquery - javascript

Is there a way to convert an html snippet to svg?
for example:
<b>This is bolded</b>
I want to make an svg document with the html snippet above... is this possible?

I would suggest that you should edit your question to describe the actual use case and goal you are trying to achieve, as directly implementing what you seem to ask for is hard (see below). Some combination of SVG-in-XHTML or XHTML-in-SVG (for example, this) are far more likely to give you want you want.
We can only help you achieve your goals if you tell us your goals instead of asking us help you to solve a particular implementation you thought of to achieve them.
As I mentioned above, There is not an easy way to do what you suggest. In particular, HTML has automatic line wrapping, floating and general positioning concepts, as well as explicit z-indexing, that are not present in SVG.
The following madness would mostly work, however:
Create an iframe or div on your page and set the HTML to your snippet.
Loop through every element and convert wrap a margin:0;padding:0;border:0 span around every word in the text.
Loop through every element (including your created spans) and calculate the absolute position on the page. (jQuery has a method to do this, or you could use the combination of offsetLeft/offsetTop and offsetParent to walk up the positioned tree and calculate it yourself.)
Calculate the equivalent z-index for each element by walking up the tree and using the getComputedStyle() and creating a chain of the local z-index.
For each of these elements, create the equivalent element in SVG with absolute positioning.
Re-sort the SVG elements you created by the hierarchy of z-indices.

Check this html to SVG demo, (using HiQPDF, a commercial product). You can find there code samples for C# and VB.NET. You can convert an URL or a HTML code snippet as you requested.

There are JS libs, that convert html to canvas:
http://html2canvas.hertzen.com/
But until now, I did not found something similar for svg.

Related

DOM manipulation in Angular directive after sub view rendering

I need a directive that will truncate long text in element and show a popover with full text in case truncation take place.
See http://plnkr.co/edit/90WP5ISQHG7FXRpetucm?p=preview
For text truncation I've used CSS and it works well.
But when I'm trying to access element content I see {{str.data}} rather then exact text from the data.
I guess that I need even't that is fired after rendering, but I can't fing any suitable.
So my question how can I run my DOM manipulation after sub view get rendered?
The only solution I've found so far is using timeout, but I think that there is better solution for it.
Do you mean just a simple rollover to show the remainder text? That's simple CSS.
.truncate-overflow:hover{ width:auto; overflow:visible; }
If not that, I would suggest storing the data into two separate pieces of data by limiting the string length. See how to do that: https://stackoverflow.com/a/7463674/1327678
I worked around this issue by performing my DOM manipulation inside mouseover instead of link method.
See http://plnkr.co/edit/90WP5ISQHG7FXRpetucm?p=preview for more details.
PS. Popover position is incorrect because plnkr overrides css manipulation and do not set top and left.

Display (syntax) trees in webpage

I want to be able to display dynamic syntax trees on a webpage, possibly with a jQuery component. To show you what I mean, this
is a syntax tree, and this is the general way I want it to be displayed.
How do I build something like this with HTML and CSS?
edit: Solution
Just in case somebody who finds this question later is trying the same, here's what I did:
I ended up drawing the tree with Graphviz as an SVG, and then, moving the svg tree inside the DOM using some magic. That way I could still interact with the elements, e.g. drag&drop or hover/click events.
The result can be seen here.
Try d3, it has a really good tree visualization
Another option is ArborJs, you can find an introduction here

Placing text characters w/ javascript without using a div

I am going to be placing a lot of characters and words all over a web page using absolute positioning. I could put each character in it's own div, then set it's position. Is there any other way to place an individual word or character on a page without putting it in a div (to save memory). I figure not (which is fine), but if there is another way I'd like to explore it.
Try using html canvas. It will allow you to draw text to it at any position you want. https://developer.mozilla.org/en/Drawing_text_using_a_canvas
You can use tags like <b> and set their css to font-weight: normal;.
If you are going to be worry about the DOM tree size, you can go ahead with this way of implementation. But what is the use of implementing this? There are plenty of jQuery and JavaScript snippets available right?
You will need some type of html tag surrounding the text or else you will have no way to apply CSS.
This cannot be done in the manner you are imagining. Anonymous boxes cannot be manipulated and, generally speaking, do not carry traditional properties. You will have to use a wrapper tag.
you can read more here: http://www.w3.org/TR/CSS2/visuren.html#anonymous-block-level

Word Wrap in Raphael JS / SVG

How do you get words to wrap inside a box in RaphaelJS? Or in browser-based SVG in general?
I found this thread on it, but it doesn't make any sense. They say to use "widthToCharNum" but as far as I can tell, this thread is the only place those words have ever been used on the internet. They suggest using a "width" attribute, but this has no effect.
Text-wrapping is not built into Raphael or the SVG spec. Period. Coming from the HTML world, I found the absence of text wrapping pretty shocking.
However, you can do it yourself without too much difficulty. See this question for details and an example. Unfortunately, you have to burn some client-side cycles to make it work dynamically.
The svg.js library has a svg.textflow.js plugin. It's not ultra fast but it does the trick. It even stores overflowing text in a data attribute so you can use it to create continuously flowing columns. Here the text flow example page.
The tspan tag can give the illusion of word wrap, but there is no built in word wrap functionality.
The tspan tag is identical to the text tag but can be nested inside text tags and inside itself. Coupled with the 'dy' attribute this allows the illusion of word wrap in SVG 1.1. Note that 'dy' is relative to the last glyph (character) drawn. There is a tutorial on how to use tspan at http://tutorials.jenkov.com/svg/text-element.html.
The article at http://www.xml.com/pub/a/2002/09/11/quint.html might also be useful.
I know it's a little belated now, but you might be interested in my Raphael-paragraph project.
It's a small library that allows you to create auto-wrapped multiline text with maximum width and height constraints, line height and text style configuration. It's still quite beta-ish and requires a lot of optimization, but it should work for your purposes.
Usage examples and documentation are provided on the GitHub page.

Use Raphael to manipulate SVG

Is it possible to use Raphael to manipulate an embedded SVG image? I used Raphael in the past to draw shapes, but haven't actually seen it being used to manipulate an existing SVG image. If not, is there anything else that allows me to easily change colours, add events, etc. to polygons of an embedded SVG image?
From my experience reading the Raphael.js source, I have to agree with previous posts. The only way I can think of to replace or modify the SVG is by replacing/modifying the markup/DOM itself.
All I want to add in my answer is a short, general explanation of why this is so. Raphael is designed as an SVG/VML generator. That is, Raphael makes JavaScript objects and appends their corresponding SVG/VML markup to the DOM as they are made. The objects have lots of additional properties that make them work within the Raphael framework.
It may be possible to write a plugin that can construct a Raphael object around an SVG element by reading its properties, but, I suspect that such an object may not have all the information it needs to coexist with the other Raphael objects. Certainly, no such parsing/reconstruction functionality currently exists.
Funny, yesterday I found the glitchsvgicons page doing that.
Although in a very primitive way, just using a regex replace of parts.
It can be hint, though: apparently you can use good old search/replace of text parts on SVG icons. But it is more prone to issues than using a real Dom tree...

Categories