Couldn't find an answer on SO or elsewhere, so by all means, link me there :)
I've created a Graph(forced) chart, and used a SVG as symbol.
Click events only trigger if I click the SVG paths itself, they do not trigger in between the paths.
How can I wrap the symbol with a div/span/other or any other solution to make the area of the symbol clickable, wether on the SVG path or not.
Thank you!
Related
Please can someone help?
I need to drag and drop small spot circles representing room sensors onto a floor Layout rendered inline (binary) into the browser.
How can I achieve this.
Download the SVG, add points via SVG program (for example InkScape), upload the SVG again.
If the SVG is displayed completely as a file in your browser (i.e. the URL ends with ".svg" or something like that), so the browser handles the drag and drop, which probably isn't implemented to work with SVG in any way, as your browser is probably not layed out to edit SVG files.
If the SVG is embedded somehow into an HTML site you might have a chance if you use JavaScript or something alike to edit the SVG in the browser, implying you can change the JavaScript on that site because you can access it or have a plugin for that.
Oh yeah, maybe there is a plugin for your browser to edit SVGs, who knows?
I'm developing a gps tracking app for android using custom SVG maps. I can print my exact position at the SVG map through the device's GPS but I'm having some difficulties when I want to pan/center the screen at my position. Basically the idea is to keep moving/panning the map automatically while i'm moving so the user won't have to do it by himself. I'm using the jquery.panzoom (https://github.com/timmywil/jquery.panzoom). Has anyone did this before, would appreciate any suggestions. Thanks
You could try using SVG fragment identifiers.
http://www.w3.org/TR/SVG11/linking.html#SVGFragmentIdentifiers
Basically you can supply a viewBox in the URL of the SVG you are linking to. That's assuming you are using an external SVG file (ie not embedded).
So for instance, if you want to show the top left 200x200 of an SVG, you can do:
http://url.of.my.svg/map.svg#svgView(viewBox(0,0,200,200))
An example: http://upload.wikimedia.org/wikipedia/commons/2/21/New_Zealand_location_map.svg#svgView(viewBox(800,1600,400,400))
Then when the GPS position changes, you just update the URL. It saves having to mess about with the contents of the file.
The only proviso is that I haven't checked that the Android WebView supports it. I'm assuming you are using a WebView??
I'm using FabricJS and I encounter a problem with the display of my SVG in the canvas:
the result is displayed outside the selection box of fabricJS (due to a translation ?)
the anchors of the selection disappear after a transformation and then it's impossible to find them back.
Here is a screenshot :
I'm using an output SVG of Potrace and I think it's the origin of my issue.
Here is the code of the SVG: SVG code in pastebin
You can test it with FabricJS on this page: FabricJS Kitchensing example.
Just paste the code of the SVG in the "Load SVG" area, then resize and rotate the section box to display the SVG.
Do you know the part of my SVG code or the part of the fabricjS code that causes the issue ?
If so, can I change it easily by myself ? If not, is it possible for anybody to correct or locate the possible mistake?
Thank you very much for your help.
EDIT: seemingly, FabricJS doesn't like this line of the SVG:
<g transform="translate(0,648) scale(0.098780,-0.098780)" fill="#000000" stroke="none">
And more especially the translate and scale attributes… How to fix it?
EDIT2: the solution would be that the translate and the scale are respectively equal to (0,0) and (1,1) or, better, that they're applied to the coordinates.
Does anybody have an idea to do that with Potrace or JS script?
2 years after, fabricJs is now able to fully parse and manage this SVG.
Just paste the old pasteBin SVG code in the kitchenSink demo and you will see that it loads fine.
Lots of improvement happened recently in the SVG parsing area.
I know this is not an answer as stackoverflow user would expect, but better to know that to think this is may still be a problem.
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
How to change the height and width of textarea (or any html element) from javascript which is inside foreign object in svg.Moreover, can I drag an html elelment and drop on svg container by any mean (htm5 any hint) or atleast can I get the coordinates on svg during draging so that I can implement my own drag and drop. Thanks in advance
You appear to my eye to have at least two distinct questions. If I understand correctly, the first one is something like this: how can you write JavaScript within an SVG instance so that you can embed the SVG instance and have the JS control the embedding HTML? Do I have that right?
If so, the answer can be constructed from the parts of http://phaseit.net/examples/SVG4/c1.html and related examples. Briefly, write "window.top" to reach the HTML reference.
The same sort of reference gives access to HTML5 drag-and-drop, if that's what you're after.
Is that the level of answer you're after, or do you need an executable example?
LATER, AFTER MORE DISCUSSION: it appears that http://phaseit.net/examples/SVG5/embedding.svg is more like what you're after. Do I have that right, Arslan Ahson? What you should see when you display the SVG instance there is an SVG-coded elliptical button which, when pushed, toggles the appearance (background color and width) of a nearby embedded HTML textarea.