Hi Guys, First off, congratulations and thank you for making Observable. Designing algorithms is the fun part of my job and Observable made it even more fun. I have been trying to add a vector overlay (plain canvas commands or SVG) on top of an Image element or live video. Is there a reasonably ea…

[image] Benoit9: I have been trying to add a vector overlay (plain canvas commands or SVG) on top of an Image element or live video. Is there a reasonably easy way to do that? Set up a relatively positioned DIV, then position an absolutely positioned image, followed by an absolutely positione…

Thank you for the quick answer! Is this using D3? I added const div = d3.select(DOM.element('div')); on top to make it work. But I am not familiar with D3. How do I add an HTMLImageElement that I have created in another cell of the notebook?

OK, I figured that I had to get the Node back, add the child HTMLImageElement, then reselect to style with d3. Is this the idiomatic way? let image = container.node().appendChild(testimage); d3.select(image) .style('position', 'absolute') .style('top', 0) .style('left', 0) .attr('w…

I generally find these things easier to discuss if there’s a link shared notebook to reference. I would think, though, that if your container is a d3 object, then you would probably do let image = container.append(testimage)

Calling append() directly on the d3 object gives the error: InvalidCharacterError: Failed to execute ‘createElement’ on ‘Document’: The tag name provided (‘[object HTMLImageElement]’) is not a valid name. Here is the notebook: Image or Video with Graphical Overlay / benoit9 | Observable

I really, really should have tested this properly before making the above claim. foreignObject support is a hot mess. Browser support differs wildly, and there are all sorts of stacking issues with animated content. Don’t use foreignObject for video (text content should be good, though). Follow @mc…

Vector Graphics overlay on top of Image or Video element

Help

mootari October 2, 2020, 6:20pm 7

Edit: I was wrong, see my next comment.

~~There’s no need for those positioning shenanigans, because you can embed a video directly into an SVG by wrapping it in a <foreignObject> element:~~

Topic		Replies	Views
What is the best way to overlay an SVG over a Canvas? Help	19	10876	December 5, 2020
Is there an easy way to add an svg file to a svg image created by D3 Help	2	637	March 15, 2021
Combining plot & d3js Help	2	535	November 17, 2022
Merging two cells into one SVG Help	1	295	November 6, 2022
Requesting help to port Sankey example to Observable \| learning through examples	9	1388	May 21, 2018

Vector Graphics overlay on top of Image or Video element

Related topics