I doing SVG animation of some physical process using svg (basically I want whole animation as a single svg file).
Example can be seen here: https://s3.amazonaws.com/public-bucket-vzi0CDPFDE4ywJfvfylfpnDW/dwg.svg .
Now I'd like to add label stating: "Time: 1.23ns" displaying current time. I couldnt find any obvioius way to replace contents of text object, insert format current time inside text element.
It would also be great if this animation wasn't using javascript, just SVG animation.
Related
How can I place a complex SVG image (with css-styles!) geo-referenced over an openlayers map so that the document's CSS styles are used with rendering the SVG.
A regular ImageLayer does a fine job of showing the georeferenced svg on the map as an image. But because it is an image, the CSS of the document has no effect on the rendered SVG
The SVG Layer example on the other hand places the SVG into the DOM and makes it react to the document's CSS and reacts when you change the CSS. But it always maps the SVG over the whole planet and seems to hide any layer I place under it.
To give you an idea of the use case: we have an externally generated SVG with several 'groups or layers' in it representing different aspects of infrastructure. This svg has to be put correctly over a map (like we can do with the imagelayer), but we want to be able to selectively show/hide the different 'groups or layers' that are within the SVG.
I guess in the end we would be needing something similar to ol/layer/Image/ImageLayer to happen in the SVG-layer example.
Any suggestions about how to approach this would be very welcome, but working code is also OK ;-)
In the example the image width is 360 degrees and the center is at [0, 0]. For a smaller extent you would need to use the appropriate width and adjust the center used in the transform https://codesandbox.io/s/lucid-poitras-i1qyb?file=/main.js Use an opacity setting to avoid completely hiding the base layer.
I know nothing about SVG. Even less about SVG fonts. However, I need to use them in my web project.
I've created a custom font with fontello and analyzed the format of the SVG file in a text editor. Then I opened an SVG file created with Inkscape (saved as plain SVG) and used its d attribute to create a new glyph in the font.
I couldn't believe that it actually worked ... well, almost ... the glyph appears flipped vertically. I have tried flipping it in Inskcape. However, when I save the file, the original d attribute is left as it was. It just adds a transform with a matrix that flips the coordinate system, but which does now work in the <glyph> tag.
Is there any way I could apply this transformation in the font file, or in Inkscape, to change the d attibute?
Thanks.
I found that, in Inkscape, ungrouping and then grouping the object applies the transformation to the coordinates.
I've setup a drawing utility with Raphael.js. The user can draw shapes, paths and enter text. Once a user adds text -> Paper.text() to the svg the svg goes into a selectable state. Meaning, if I add text and switch to the pen tool, moving the pen around the svg will cause adjacent dom elements to go into their ::selection state.
So I'd like to convert the text to a path to prevent this from happening. I don't see anything like this in the documentation.
if you use print() instead of text() for text printing, then the text will be a raphael path object. (print() use a cufon javascript font that renders to a raphael path).
Try tweaking the pointer-events property on the text elements with .attr(). none might fit your needs. There are some good background info links on MDN.
.attr({pointer-events: none})
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.