Skip to content

Instantly share code, notes, and snippets.

@elliz
Last active August 20, 2020 08:50
Show Gist options
  • Save elliz/12b874a390d66dd6cf0fd65da400850f to your computer and use it in GitHub Desktop.
Save elliz/12b874a390d66dd6cf0fd65da400850f to your computer and use it in GitHub Desktop.
SVG that shows local coords on hover NOTE will not work on github as js script blocked
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10257.81283295410 -53047.99824824630 1272.48315837194 1070.33434028260">
<style>
* {
cursor: crosshair;
}
.stockpile {
strokeWidth: 2px;
stroke: tomato;
fill: none;
}
.intellisense {
stroke: olive;
fill: olive;
fill-opacity: 0.1;
}
.stockpileBoundingBox {
fill: orange;
opacity: 0;
}
.stockpileBoundingBox:hover {
opacity: 0.3
}
text {
font-family: Arial, Helvetica, sans-serif;
}
circle {
fill:yellow;
stroke:orange;
stroke-width:1px
}
</style>
<circle cx="0" cy="0" r="5" id="dot" />
<text x="0" y="0" id="coords" />
<g id="P44">
<path class="stockpile intellisense" d="M -9785.8609609270 -52325.9310868569 L-9666.2633907044 -52261.9211196955 L-9721.4298755606 -52099.7906107670 L-9761.0149868315 -52037.4651164256 L-9809.4435804075 -52028.2005159154 L-9880.1914388491 -52079.5769369265 L-9933.2523326802 -52141.9024312679 L-9826.2883086079 -52341.9335786473 Z" />
<text x="-9799.7578616923" y="-52185.06704728135">P44</text>
<rect class="stockpileBoundingBox" x="-9933.2523326802" y="-52341.9335786473" width="266.9889419758" height="313.7330627319" />
</g>
<g id="P45">
<path class="stockpile intellisense" d="M -9826.2883086079 -52341.9335786473 L-9697.8472560801 -52549.5448537167 L-9632.1528160987 -52514.5920427010 L-9561.8260758621 -52484.2715319403 L-9642.6807712239 -52328.8789142920 L-9666.2633907044 -52261.9211196955 L-9785.8609609270 -52325.9310868569 Z" />
<text x="-9694.0571922350" y="-52405.7329867061">P45</text>
<rect class="stockpileBoundingBox" x="-9826.2883086079" y="-52549.5448537167" width="264.4622327458" height="287.6237340212" />
</g>
<g id="P46">
<path class="stockpile intellisense" d="M -9697.847256 -52549.54485 L-9623.730452 -52656.08776 L-9560.141603 -52747.47041 L-9533.190038 -52761.36731 L-9432.542787 -52698.19958 L-9439.280678 -52633.34738 L-9515.081955 -52527.22559 L-9561.826076 -52484.27153 L-9632.152816 -52514.59204 Z" />
<text x="-9565.1950215" y="-52622.81942">P46</text>
<rect class="stockpileBoundingBox" x="-9697.847256" y="-52761.36731" width="265.304469" height="277.09578" />
</g>
<g id="P47">
<path class="stockpile" d="M-9642.68077122388 -52328.87891429200 L-9561.82607586213 -52484.27153194030 L-9515.08195510611 -52527.22558885130 L-9434.18183504511 -52489.40208258130 L-9342.03606230376 -52349.53055106560 L-9408.13477576199 -52296.77286234210 L-9419.65656985104 -52284.03824782260 L-9457.86041340947 -52273.72927416400 L-9550.03476612187 -52300.41132363340 L-9613.10142850404 -52295.56004191160 Z" />
<text x="-9492.35841676382" y="-52400.47743150765">P47</text>
<rect class="stockpileBoundingBox" x="-9642.68077122388" y="-52527.22558885130" width="300.64470892012" height="253.49631468730" />
</g>
<g id="P48">
<path class="stockpile intellisense" d="M -9434.18183504511 -52489.40208258120 L-9515.08195510611 -52527.22558885130 L-9515.08195510611 -52527.22558885130 L-9439.28067820447 -52633.34737651360 L-9358.40913811452 -52673.96001620470 L-9254.71299131307 -52667.28950383730 L-9221.96683969155 -52616.35104575940 L-9194.07196979175 -52450.80105700620 L-9194.07196979174 -52381.67029247190 L-9342.03606230376 -52349.53055106560 Z" />
<text x="-9354.576962448925" y="-52511.74528363515">P48</text>
<rect class="stockpileBoundingBox" x="-9515.08195510611" y="-52673.96001620470" width="321.00998531437" height="324.42946513910" />
</g>
<g id="P50">
<path class="stockpile" d="M-9398.43221231858 -52100.29595261290 L-9202.56171280473 -52098.47672196740 L-9025.48992996248 -52093.01903003050 L-9010.32967458216 -52167.60748650170 L-9047.92710792537 -52220.97158544040 L-9151.01684451161 -52265.23953115100 L-9179.51812462663 -52321.63568116580 L-9194.07196979174 -52381.67029247190 L-9342.03606230376 -52349.53055106560 L-9408.13477576199 -52296.77286234210 L-9419.65656985104 -52284.03824782260 L-9387.51682844475 -52221.57799565560 Z" />
<text x="-9214.99312221660" y="-52237.34466125120">P50</text>
<rect class="stockpileBoundingBox" x="-9419.65656985104" y="-52381.67029247190" width="409.32689526888" height="288.65126244140" />
</g>
<g id="P53">
<path class="stockpile" d="M-9873.39107275641 -52469.76619298250 L-10051.53013757740 -52241.32903927080 L-10232.81283295410 -52384.88816797950 L-10063.05678294820 -52614.37319854310 L-9985.51389590847 -52548.35695687410 Z" />
<text x="-10053.101952855255" y="-52427.85111890695">P53</text>
<rect class="stockpileBoundingBox" x="-10232.81283295410" y="-52614.37319854310" width="359.42176019769" height="373.04415927230" />
</g>
<g id="P54">
<path class="stockpile" d="M-9676.65807034011 -52883.28133466120 L-9737.05652777534 -52942.22440757990 L-9793.81652391929 -53022.99824824630 L-9878.95651813522 -53004.80594178990 L-9947.35959041127 -52823.61056948420 L-9987.38266461534 -52729.73826816920 L-10063.05678294820 -52614.37319854310 L-9985.51389590847 -52548.35695687410 L-9873.39107275641 -52469.76619298250 L-9762.52575681430 -52670.06750299220 Z" />
<text x="-9869.857426644155" y="-52746.38222061440">P54</text>
<rect class="stockpileBoundingBox" x="-10063.05678294820" y="-53022.99824824630" width="386.39871260809" height="553.23205526380" />
</g>
<g id="P56">
<path class="stockpile" d="M-9642.68077122388 -52328.87891429200 L-9666.26339070440 -52261.92111969550 L-9721.42987556060 -52099.79061076700 L-9761.01498683146 -52037.46511642560 L-9748.33090649658 -52002.66390796370 L-9633.11296560608 -52068.15621120670 L-9523.95912686771 -52098.47672196740 L-9398.43221231858 -52100.29595261290 L-9387.51682844475 -52221.57799565560 L-9419.65656985104 -52284.03824782260 L-9457.86041340947 -52273.72927416400 L-9550.03476612187 -52300.41132363340 L-9613.10142850404 -52295.56004191160 Z" />
<text x="-9574.265907638105" y="-52165.77141112785">P56</text>
<rect class="stockpileBoundingBox" x="-9761.01498683146" y="-52328.87891429200" width="373.49815838671" height="326.21500632830" />
</g>
<script xmlns="http://www.w3.org/2000/svg">
var svg = document.documentElement;
var pt = svg.createSVGPoint();
var dot = document.getElementById('dot');
var coords = document.getElementById('coords');
coords.textContent = '';
svg.addEventListener('mousemove',function(evt){
var loc = cursorPoint(evt);
dot.setAttribute('cx', loc.x);
dot.setAttribute('cy', loc.y);
var coordsText = loc.x.toFixed(3) + ', ' + loc.y.toFixed(3);
var textWidth = coordsText.length *8;
coords.textContent = coordsText;
coords.setAttribute('x', loc.x - (textWidth / 2));
coords.setAttribute('y', loc.y - 10);
},false);
svg.addEventListener('click',function(evt){
setClipboard(coords.textContent);
},false);
function setClipboard(text) {
const data = new ClipboardItem({
"text/plain" : new Blob([text], { type: "text/plain" })
});
navigator.clipboard.write([data]).then(function() {
console.log('copied', text);
coords.textContent += " ✔ Copied";
}, function(err) {
console.error('copy failed', text, err);
});
}
function cursorPoint(evt){
pt.x = evt.clientX;
pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
</script>
</svg>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment