OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Markmap SVG as featured image in wordpress?

  • Thread starter Thread starter Emil B
  • Start date Start date
E

Emil B

Guest
Im trying to get a markmap SVG file to work as a featured image on a post in wordpress.

HTML file code

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

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&gt;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&gt;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.

<p>Im trying to get a markmap SVG file to work as a featured image on a post in wordpress.</p>
<p>HTML file code</p>
<pre><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>
</code></pre>
<p>SVG File code</p>
<pre><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&gt;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&gt;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>
</code></pre>
<p>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.</p>
<p>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 =)</p>
<p>Its quite big the mindmap so i need to be able to pan/zoom around in the embedding/img.</p>
 

Latest posts

Online statistics

Members online
0
Guests online
5
Total visitors
5
Top