screenshots.gif
[图片上传失败...(image-51167d-1677394809215)]
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="MDict JS">
<meta name="robots" content="noindex">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes, maximum-scale=10">
<style>
.mindmap-svg {
height: 100%;
width: 100%;
}
.mindmap-svg:focus {
outline: none;
}
.mindmap-node>a {
background: #f5f5f5;
border-radius: 10px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
color: #212121;
display: inline-block;
font-family: 'Raleway';
font-size: 22px;
margin: 0 auto;
padding: 15px;
text-align: center;
text-decoration: none;
transition: background-color .2s, color .2s ease-out;
}
.mindmap-node>a[href]:hover {
background-color: #f57c00;
color: #fff;
cursor: pointer;
}
.mindmap-node--editable {
cursor: all-scroll;
}
.mindmap-node--editable>a {
pointer-events: none;
}
.mindmap-subnode-group {
align-items: center;
border-left: 4px solid #9e9e9e;
display: flex;
margin-left: 15px;
padding: 5px;
}
.mindmap-subnode-group a {
color: #212121;
font-family: 'Raleway';
font-size: 16px;
padding: 2px 5px;
}
.mindmap-connection {
fill: transparent;
stroke: #9e9e9e;
stroke-dasharray: 10px 4px;
stroke-width: 3px;
}
.mindmap-emoji {
height: 24px;
vertical-align: bottom;
width: 24px;
}
.reddit-emoji {
border-radius: 50%;
}
mark{
background: orange;
color: black;
}
html,body{
padding:0;
margin:0;
}
body{
overflow: scroll;
}
</style>
<!--script src='https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js'> </script-->
</head>
<body style='background:#fff'>
<svg id="map" class="mindmap-svg" viewBox="0 0 1500 2500">
<g transform="translate(0,0) scale(1)">
<path class="mindmap-connection" d="M 487 -259 Q 443 241 , 402 540">
</path>
<path class="mindmap-connection" d="M 402 540 Q 298 590 , 154 639">
</path>
<path class="mindmap-connection" d="M 154 639 Q 135 696 , 183 753">
</path>
<path class="mindmap-connection" d="M 955 417 Q 717 362 , 746 138">
</path>
<path id="location" transform="translate(0,0) scale(1)" d="M0,-7c-3.87,0 -7,3.13 -7,7s3.13,7 7,7 7,-3.13 7,-7 -3.13,-7 -7,-7zM15.65,-1.75c-0.81,-7.3 -6.6,-13.09 -13.9,-13.9L1.75,-19.25h-3.5v3.61C-9.05,-14.84 -14.84,-9.05 -15.65,-1.75L-19.25,-1.75v3.5h3.61c0.81,7.3 6.6,13.09 13.9,13.9L-1.75,19.25h3.5v-3.61c7.3,-0.81 13.09,-6.6 13.9,-13.9L19.25,1.75v-3.5h-3.61zM0,12.25c-6.77,0 -12.25,-5.48 -12.25,-12.25s5.48,-12.25 12.25,-12.25 12.25,5.48 12.25,12.25 -5.48,12.25 -12.25,12.25z">
</path>
<foreignObject class="mindmap-node mindmap-node--editable" width="125" height="55" x="426" y="14">
<a id="node-undefined">python<img class="mindmap-emoji" title="wiki" ></a>
<title></title>
</foreignObject>
<foreignObject class="mindmap-node mindmap-node--editable" width="88" height="55" x="360" y="613">
<a>basics</a>
<title></title>
</foreignObject>
<foreignObject class="mindmap-subnodes" width="113" height="176" x="546" y="3">
<div class="mindmap-subnode-group" style="border-left-color: rgba(255, 189, 10, 1.0)">
<a><img class="mindmap-emoji reddit-emoji" title="reddit"></a>
<div></div>
</div>
<div class="mindmap-subnode-group" style="border-left-color: rgba(255, 189, 10, 1.0)">
<a>source <img class="mindmap-emoji" title="github"></a>
<div></div>
</div>
<div class="mindmap-subnode-group" style="border-left-color: rgba(255, 189, 10, 1.0)">
<a>source <img class="mindmap-emoji" title="github"></a>
<div></div>
</div>
</foreignObject>
</g>
</svg>
<script>
function ge(e,p){return (p||document).getElementById(e)};
window.debug = function(a,b,c,d,e){var t=[a,b,c,d,e];for(var i=5;i>=0;i--){if(t[i]===undefined)t[i]='';else break}console.log("%c wordmap ","color:#333!important;background:#0FF;",t[0],t[1],t[2],t[3],t[4])}
var ua=navigator.userAgent, mobile=(/Android|webOS|iPhone|iPod|BlackBerry/i.test(ua));
var map = ge("map");
var loca = ge("location");
var mapX = 1500, mapY = 2500;
map.style.background="#0000ff22"
map.addEventListener('click', function(e){
if(e.clientY==undefined)
e.clientY=e.originalEvent.changedTouches[0].clientY;
if(e.clientX==undefined)
e.clientX=e.originalEvent.changedTouches[0].clientX;
debug("mousedown", e.clientX, e.clientY, e);
var x = (e.clientX+document.documentElement.scrollLeft) * mapX / document.documentElement.clientWidth;
var y = (e.clientY+document.documentElement.scrollTop) * mapX / document.documentElement.clientWidth;
loca.setAttribute("transform", "translate("+parseInt(x)+","+parseInt(y)+")")
});
</script>
</body>
</html>
网友评论