Subscribe for automatic updates: RSS icon RSS

Login icon Sign in for full access | Help icon Help
Advanced search

Pages: [1]
  Reply  |  Print  
Author Topic: SVG title  (Read 9552 times)
Snorri B.
Posts: 103


« on: October 03, 2018, 06:28:52 pm »

Hi.
I'm playing a bit with the SVG library. i'm trying to add hovering text when the mouse is over an element. Google tells me I need to add the title element to my object, something like
Code
  1. <rect x="0" y="0" width="20" height="20">
  2. <title> Mytitle </title>
  3. </rect>
  4.  

How can I achieve this? I seems there is no helper function for adding this particular DOM element.

Regards,
-Snorri
Sebastien F.
Four Js
Posts: 509


« Reply #1 on: October 04, 2018, 09:25:21 am »

Hi Snorry,

You are right we are missing a title() function in fglsvgcanvas.4gl library.

We will review this, thanks for the suggestion!

Quick workaround:

You need om.DomDocument.createChars() to create the text element for the title node, but the om.DomDocument object used by fglsvgcanvas is not exposed so you have to add this function in the lib:
Code
  1. FUNCTION getDocument()
  2.    CALL _check_canvas_id(current_canvas)
  3.    RETURN canvases[current_canvas].document
  4. END FUNCTION
  5.  

Then you can build the title node as follows:

Code
  1.    DEFINE doc om.DomDocument
  2.    DEFINE g, t, tt om.DomNode
  3.    ...
  4.    LET g = fglsvgcanvas.g( "clock" )
  5.    LET t = fglsvgcanvas.createElement("title",101)
  6.    LET doc = fglsvgcanvas.getDocument()
  7.    LET tt = doc.createChars("The text to be displayed")
  8.    CALL t.appendChild( tt )
  9.    CALL g.appendChild( t )
  10.    ...
  11.  

Seb
Snorri B.
Posts: 103


« Reply #2 on: October 04, 2018, 01:04:23 pm »

Thanks Seb.

The problem is that the rect object is a DomNode, not DomDocument. There is no CreateElement on DomNode. I need the title on the rect, is that possible?

Snorri.
Snorri B.
Posts: 103


« Reply #3 on: October 04, 2018, 01:42:00 pm »

Sorry Seb, I have this working now so please ignore my last post.

Thanks a lot for your help!

Regards,
-Snorri
Reuben B.
Four Js
Posts: 1047


« Reply #4 on: October 05, 2018, 01:46:28 am »

I think you can also do it without having to expose the DomDocument by using the @chars keyword for both node and attribute name of the text node

Code
  1. DEFINE n,tn,tc omDomNode
  2.  
  3.    LET tn = n.createChild("title")
  4.    LET tc = tn.createChild("@chars")
  5.    CALL tc.setAttribute("@chars", "Hover Text")

Product Consultant (Asia Pacific)
Developer Relations Manager (Worldwide)
Author of https://4js.com/ask-reuben
Contributor to https://github.com/FourjsGenero
Snorri B.
Posts: 103


« Reply #5 on: October 05, 2018, 11:27:31 am »

Thanks Seb. This works like a charm. No need to hack the library :)

Cheers,
-Snorri
Sebastien F.
Four Js
Posts: 509


« Reply #6 on: October 05, 2018, 11:36:08 am »

Last suggestion was from Reuben ;-)
Seb
Snorri B.
Posts: 103


« Reply #7 on: October 05, 2018, 11:39:39 am »

Thanks Reuben!

And have a nice weekend y'all.


Regards,
-Snorri
Sebastien F.
Four Js
Posts: 509


« Reply #8 on: October 05, 2018, 12:13:44 pm »

Snorri,

You may also want to take a look at the demos we have on our Github:

https://github.com/FourjsGenero/fgl_svg_chart

Seb
Pages: [1]
  Reply  |  Print  
 
Jump to:  

Powered by SMF 1.1.21 | SMF © 2015, Simple Machines