Debug info:
SYSTEM INFO:
Obsidian version: v0.13.23
Installer version: v0.12.10
Operating system: Windows 10 Pro 10.0.22000
Login status: logged in
Catalyst license: vip
Insider build toggle: on
Live preview: on
Legacy editor: off
Base theme: dark
Community theme: none
Snippets enabled: 6
Safe mode: off
Plugins installed: 45
Plugins enabled: 0
RECOMMENDATIONS:
Custom theme: for cosmetic issues, please first try updating your theme to latest. If still not fixed, please try to make the issue happen in the help vault or disable community theme and snippets.
Additional information
The debug info says six snippets are enabled; however, no snippets are enabled.
I am not sure. I just checked once more and the gradient bar in the SVG is not displaying in reading mode in the help vault again:
It does show in the edit mode:
If you were not having issues, I would blame this on something I was doing. I’ll try playing around a bit to see if I can determine how it worked one time for me but not the other two times. I mean my issue might still be the person between the chair and keyboard.
The issue is that in preview mode the element #Gradient3 is defined twice in DOM and the first instance of it is hidden. Once in markdown-source-view and again in markdown-reading-view.
Mermaid charts have similar issues, they also use IDs that get duplicated. Either Obsidian should not render markdown-source-view and markdown-reading-view in DOM at the same time OR they should be encapsulated in shadow DOM.
But I’m not sure what framework Obsidian uses, maybe neither is possible without major changes.
A quick fix for this issue would be if Obsidian changed the IDs in markdown-reading-view to something unique.
For example if I run this in the developer console, it finds all the elements with IDs and then appends -fix to those IDs, but also makes the change in the places where the IDs are used.
document.querySelectorAll(".markdown-reading-view [id]").forEach((el) => {
const id = el.id;
const readingView = document.querySelector(".markdown-reading-view");
readingView.innerHTML = readingView.innerHTML.replaceAll(id, id + "-fix")
})
This makes the gradient visible again and makes arrows visible in mermaid diagrams (Mermaid: arrows not showing).
But I can’t say if this could have any negative side-effects… it feels a bit hacky.
Maybe the replace should be done only to elements which are within an <svg> element, to avoid accidentally changing user written content.
This way it doesn’t touch the user written text, but also, because it doesn’t rewrite the whole reading view HTML, it keeps event references intact outside SVG elements.
And this way you could even use multiple SVGs which use clashing IDs.
At the moment, if you include 2 SVGs and one defines a gradient:
Then when the second SVG tries to use #gradient, it will actually refer to the gradient of the first SVG and so the second SVG will render incorrectly.
Maybe it could be a temporary fix until shadow DOM is implemented?
Thank you very much!
It really help me with some mermaid rendering issues
Based on your code, I find the “subgraph” in the mermaid SVG can not be showed successfully.
Here is the example:
```mermaid
flowchart TB
subgraph one
direction LR
a1-->b1
end
a1-.->c1
subgraph two
a2-->b2
end
one-.->two
subgraph three
a3-->b3
end
b3-->b1
```
