Im trying to get a markmap SVG file to work as a featured image on a post in wordpress.
HTML file code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Markmap</title>
<style>
* {
margin: 0;
padding: 0;
}
#mindmap {
display: block;
width: 100vw;
height: 100vh;
}
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/style.css">
</head>
<body>
<svg id="mindmap"></svg>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/index.js"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js"></script><script>(()=>{setTimeout(()=>{const{markmap:O,mm:h}=window,M=new O.Toolbar;M.attach(h);const re=M.render();re.setAttribute("style","position:absolute;bottom:20px;right:20px"),document.body.append(re)})})()</script><script>((i,L,f,o)=>{const w=i();window.mm=w.Markmap.create("svg#mindmap",(L||w.deriveOptions)(o),f)})(()=>window.markmap,null,{"content":"test","children":[{"content":"Step1","children":[],"payload":{"lines":"0,1"}},{"content":"1step","children":[{"content":"Step2","children":[{"content":"2step","children":[],"payload":{"lines":"3,4"}},{"content":"Step3","children":[],"payload":{"lines":"4,5"}}],"payload":{"lines":"2,5"}}],"payload":{"lines":"1,5"}}],"payload":{"lines":"0,5"}},{"colorFreezeLevel":3})</script>
</body>
</html>
SVG File code
<svg xmlns="http://www.w3.org/2000/svg" class="w-screen h-screen leading-none markmap mm-1hipio-1" style=""><style>.markmap{--markmap-max-width: none;--markmap-a-color: #0097e6;--markmap-a-hover-color: #00a8ff;--markmap-code-bg: #f0f0f0;--markmap-code-color: #555;--markmap-highlight-bg: #ffeaa7;--markmap-table-border: 1px solid currentColor;--markmap-font: 300 16px/20px sans-serif;--markmap-circle-open-bg: #fff;--markmap-text-color: #333;font:var(--markmap-font);color:var(--markmap-text-color)}.markmap-link{fill:none}.markmap-node>circle{cursor:pointer}.markmap-foreign{display:inline-block}.markmap-foreign p{margin:0}.markmap-foreign a{color:var(--markmap-a-color)}.markmap-foreign a:hover{color:var(--markmap-a-hover-color)}.markmap-foreign code{padding:.25em;font-size:calc(1em - 2px);color:var(--markmap-code-color);background-color:var(--markmap-code-bg);border-radius:2px}.markmap-foreign pre{margin:0}.markmap-foreign pre>code{display:block}.markmap-foreign del{text-decoration:line-through}.markmap-foreign em{font-style:italic}.markmap-foreign strong{font-weight:700}.markmap-foreign mark{background:var(--markmap-highlight-bg)}.markmap-foreign table,.markmap-foreign th,.markmap-foreign td{border-collapse:collapse;border:var(--markmap-table-border)}.markmap-foreign img{display:inline-block}.markmap-foreign svg{fill:currentColor}.markmap-foreign-testing-max{max-width:var(--markmap-max-width)}.markmap-foreign-testing-max img{max-width:var(--markmap-max-width);max-height:none}.markmap-dark .markmap{--markmap-code-bg: #1a1b26;--markmap-code-color: #ddd;--markmap-circle-open-bg: #444;--markmap-text-color: #eee}</style><g transform="translate(210.7243977599602,257.94914047844014) scale(0.5152823188946778)"><path class="markmap-link" data-depth="2" data-path="1.2" d="M43,10C83,10,83,-5,123,-5" stroke="rgb(255, 127, 14)" stroke-width="1.5"></path><path class="markmap-link" data-depth="2" data-path="1.3" d="M43,10C83,10,83,25,123,25" stroke="rgb(140, 86, 75)" stroke-width="1.5"></path><path class="markmap-link" data-depth="3" data-path="1.3.4" d="M181,25C221,25,221,25,261,25" stroke="rgb(148, 103, 189)" stroke-width="1.5"></path><path class="markmap-link" data-depth="4" data-path="1.3.4.5" d="M320,25C360,25,360,12.5,400,12.5" stroke="rgb(148, 103, 189)" stroke-width="1.5"></path><path class="markmap-link" data-depth="4" data-path="1.3.4.6" d="M320,25C360,25,360,37.5,400,37.5" stroke="rgb(148, 103, 189)" stroke-width="1.5"></path><g data-depth="4" data-path="1.3.4.6" transform="translate(400, 17.5)" class="markmap-node"><line x1="-1" x2="61" y1="20" y2="20" stroke="rgb(148, 103, 189)" stroke-width="1.5"></line><foreignObject class="markmap-foreign" x="8" y="0" width="43" height="20" style="opacity: 1;"><div xmlns="http://www.w3.org/1999/xhtml">Step3</div></foreignObject></g><g data-depth="4" data-path="1.3.4.5" transform="translate(400, -7.5)" class="markmap-node"><line x1="-1" x2="60" y1="20" y2="20" stroke="rgb(148, 103, 189)" stroke-width="1.5"></line><foreignObject class="markmap-foreign" x="8" y="0" width="42" height="20" style="opacity: 1;"><div xmlns="http://www.w3.org/1999/xhtml">2step</div></foreignObject></g><g data-depth="3" data-path="1.3.4" transform="translate(261, 5)" class="markmap-node"><line x1="-1" x2="61" y1="20" y2="20" stroke="rgb(148, 103, 189)" stroke-width="1.5"></line><circle stroke-width="1.5" cx="59" cy="20" r="6" stroke="rgb(148, 103, 189)" fill="var(--markmap-circle-open-bg)"></circle><foreignObject class="markmap-foreign" x="8" y="0" width="43" height="20" style="opacity: 1;"><div xmlns="http://www.w3.org/1999/xhtml">Step2</div></foreignObject></g><g data-depth="2" data-path="1.3" transform="translate(123, 5)" class="markmap-node"><line x1="-1" x2="60" y1="20" y2="20" stroke="rgb(140, 86, 75)" stroke-width="1.5"></line><circle stroke-width="1.5" cx="58" cy="20" r="6" stroke="rgb(140, 86, 75)" fill="var(--markmap-circle-open-bg)"></circle><foreignObject class="markmap-foreign" x="8" y="0" width="42" height="20" style="opacity: 1;"><div xmlns="http://www.w3.org/1999/xhtml">1step</div></foreignObject></g><g data-depth="2" data-path="1.2" transform="translate(123, -25)" class="markmap-node"><line x1="-1" x2="61" y1="20" y2="20" stroke="rgb(255, 127, 14)" stroke-width="1.5"></line><foreignObject class="markmap-foreign" x="8" y="0" width="43" height="20" style="opacity: 1;"><div xmlns="http://www.w3.org/1999/xhtml">Step1</div></foreignObject></g><g data-depth="1" data-path="1" transform="translate(0,-10)" class="markmap-node"><line x1="-1" x2="45" y1="20" y2="20" stroke="rgb(31, 119, 180)" stroke-width="2"></line><circle stroke-width="1.5" cx="43" cy="20" r="6" stroke="rgb(31, 119, 180)" fill="var(--markmap-circle-open-bg)"></circle><foreignObject class="markmap-foreign" x="8" y="0" width="27" height="20" style="opacity: 1;"><div xmlns="http://www.w3.org/1999/xhtml">test</div></foreignObject></g></g></svg>
I have tried several plugins and also tried the gutenberg embedding block, advanced iframe plugin and so on… But the SVG doesnt seem to behave like a regular SVG when im using the plugins. I also tried to use a html file in a folder on the server and then embed it manually in the post as an iframe, that works in preview but as soon as i publish it just breaks.
Any ideas? My preferred solution is to be able to use it as a featured post image but im glad for anything at this stage that can help me display the SVG or embed the HTML properly =)
Its quite big the mindmap so i need to be able to pan/zoom around in the embedding/img.