I am currently experimenting with svg in html and have a stack of overlapping foreignObject elements. I would like to be able to bring an individual foreignObject to the front of the stack using javascript.
I can't seem to get the zIndex property to work with them and I'm not sure what else I could try.
Is it possible? How could I do this?
On an older post on this site, a user said:
My solution is to add style="display:inline-block" to the first child
of the foreignObject tag. This seems to fix the problem.
Related
JS Fiddle Example
I have a div which contains user generated HTML elements. Each line in the div can be any number of characters, but displays only on one line, and does not wrap. My issue is that partial elements are shown vertically, and due to the variety of HTML elements, I cannot anticipate exactly how many lines of text can fit.
The image below shows the issue, in this case using only list item elements (highlighted with a red arrow.) I've included the HTML and CSS are below as well.
I have been looking for a ReactJS compatible solution to prevent element that do not fit completely from being displayed (I'm open to nearly anything CSS, NPM module, JavaScript snippets, just no jQuery.) All elements needs to remain at a static size, so dynamically resizing the text or container is also not suitable unfortunately.
The solution need only work in Chrome.
Unfortunately despite hours and hours searching for solutions in the form of modules on NPM or CSS solutions such as -webkit-line-clamp, I've found nothing suitable. -webkit-line-clamp will only work (as far as I can tell) on text within a single element, so it will fix a paragraph with 5 lines, but it will not fix 5 single line paragraphs.
Any ideas on how to solve this would be appreciated greatly. I've been struggling with this for months. Thank you very much for reading.
I have already an SVG element on my HTML page. How can I initialize Raphael with it so that it wont create a new SVG, but use the one I provide.
Thanks
I don't think Raph will allow you to do this. I think you will need to give it a div or container that Raph will place the svg/vml place inside. I don't think you can give it an existing element to use (as svg).
I suspect this is because Raphael does not only create SVG, but possibly VML if its one of the very old browser versions. If you definitely need SVG and want to only use existing elements, you may want to look at Snap.svg, which is Raphaels younger sister (and shares a lot of the same codebase), or another like SVG.js.
Hello all I am working on javascript jquery and svg.I want to ask a question that is it possible to make my svg:g element scrollable.
Like I have one div containing an svg element and that svg intern contains many svg:g elements
I want to make one of my g scrollable.
I have read about
scroll.js but i can not use it so is there any other library in jqquery or javascript which provides scrolling support in svg
or any other wany to do it like make a dive inside svg etc
Any help will be appreciated
thanks
Try this: http://polymaps.org/
or this: http://wayfarerweb.com/jquery/plugins/mapbox/
I'm looking at Rangy (http://code.google.com/p/rangy/) and it seems it has a bunch of DOM utilities but I don't understand them without examples. So I'm turning to SO with my ideas and hopefully you guys can show me how this can be done:
What I need to do with Rangy is use it to find the position and dimensions of the selection. I want to get the frame or Rect of the selection, whether relative to the document or parent element. Then I can position my callout accordingly.
I believe the demo that comes with Rangy already illustrates what you want. specifically http://rangy.googlecode.com/svn/trunk/demos/position.html inside showSelectionPosition function
Considering the fact that selection may be spread across multiple elements, it'd be best to use the coordinates of either startSelEl or endSelEl to anchor your callout to the beginning or end of a selection.
There is an embryonic, unreleased Rangy module I wrote for getting pixel coordinates of a selection or range. Unfortunately the difficulty of getting this working properly in all browsers and all situations has put me off completing it and I have essentially abandoned it. However, if you add a bit more detail about what you're trying to do I may be able to suggest something.
I have some objects inside of svg that can be clicked by user.
Is there any way to:
- send information about object (id) that was clicked by user to the 'main html document'?
- draw from outside document in the svg file.
Probably, my description is unclear,... I want to implement something like this:
user click on any object inside of svg-image;
main document will receive id of the clicked object and:
display some information about that object;
draw additional object inside of the svg-image.
Questions: how to communication from svg to document and from document to svg?
Thanks a lot, any thoughts are welcome!
P.S. Probably SVG is not the best way do that? What is better then?
EDIT: I saw recommendation regarding use of Raphael,.. but I would like to see 'native' options. (For now I'm analyzing Raphaels implementation to see that, but don't think it is doing exactly what I need).
See this example for how to get the DOM of a referenced svg from the parent document.
And here's an example of how you can call from an svg file to the parent document.
SVG is very well suited for doing what you describe.
I'd suggest using a library like Raphaël to support your SVG building. You can attach events to DOM objects that you can get through the node property of an image component.
Raphaël.js is indeed a good solution if you want to stick to SVG / VML. Now you can use canvas (new HTML 5 functionality) as well. Canvas is a new html tag (that can have id, events, ...) that allows you to draw free shapes a bit like SVG does. IE doesn't support canvas natively, of course, and you will need "excanvas.js" (this one or another, but this one works pretty well...) to make it IE compatible.
Only one restriction I know of regarding canvas: using background images makes IE be very slow. I would use Raphaël.js if it was something you'd consider doing.
Good luck
Nobody suggested, but accidentally I've found that svg is already supported by jQuery!
http://plugins.jquery.com/project/svg
Probably that is not the best approach, but I will try to work with svg using jquery. And actually, that seems like reasonable