search

observablehq / graphviz

A convenience method for using Graphviz.
https://beta.observablehq.com/@mbostock/graphviz
Other
39 stars 8 forks source link

Base tag renders svg gradients as black on ios #6

Closed TGRBos closed 3 years ago

TGRBos commented 4 years ago

The observable notebooks have a base tag which affect the rendering of e.g. gradients in graphviz. The gradients are defined in a defs tag and used in the SVG via URL. On iOS this causes gradients to turn black.

External stylesheet with !important doesn’t seem to work, is it possible to get rid of the base tag, or any other solutions ?

mbostock commented 4 years ago

The base tag is needed so that relative links work as expected, since Observable notebooks run user content on a separate domain (${user}.static.observableusercontent.com rather than observablehq.com). We could do something in this library to patch up the SVG content generated by Graphviz to correct the relative anchor fragments. Though, it is a browser bug in Safari that these are no resolved correctly.

TGRBos commented 4 years ago

Thanks, that explains it. I was already afraid the base tag was a vital part of the infrastructure.

A workaround for the browser bug via CSS should be feasible I guess and perhaps cleaner than scripting. Not quite sure why adding !important didn’t work, I’ll try a few other options.