render navigation li items into svg element

[jones4410]

Hi

I would like to render the <li> navigation elements of the header into specific places of an svg element. I don't know how, so I ask here.

Thanks for your help!

Jones

[rick]

Hi Jones, and welcome to the forum.

If I understand your question correctly, adding HTML markup within and SVG element is a front-end issue (therefore not related to ProcessWire) and quite a bit more complicated that it looks. There are, however, many references available from a google search regarding SVG <text>, or CANVAS, etc., which would be a great starting point for you.

Since ProcessWire does not restrict you on what or how you create your user-interface, I would recommend you first create the front-end and get it working the way you desire. We could then help you with having ProcessWire manage that information.

You will have to determine the best way to accomplish your goals, but you might look at either the TSPAN

var text = svg.append("svg:text");
text.append("svg:tspan").style("fill", "red").text("hello");
text.append("svg:tspan").style("fill", "blue").text("world");

Or an foreignObject element:

svg.append("svg:foreignObject")
.attr("width", 200)
.attr("height", 200);
.append("div")
.html("<span style='color:red'>Hello</span> <span style='color:blue'>world</span>!");

Or even an absolute-positioned HTML overlay.

Edit:

@Mods: Should this be moved to off-topic?