Built with blockbuilder.org
forked from anonymous's block: fresh block
forked from anonymous's block: Response svg image map
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
svg { width: 100vw }
polygon { stroke: magenta; stroke-width:5px; }
</style>
</head>
<body>
<svg>
<image xlink:href="https://s-media-cache-ak0.pinimg.com/originals/16/64/39/166439a1a74d4f0d389bdaf85fba5dba.jpg"/>
<polygon fill="transparent" id="fire" points="238,78,176,121,158,147,153,173,146,148,120,208,107,248,111,277,103,283,102,289,113,296,147,329,138,337,129,335,129,345,140,350,160,334,211,334,222,338,220,347,234,340,225,326,246,300,256,266,244,218,232,186,252,139,273,110,243,124,226,134,207,153,203,132,221,108,235,99"/>
<polygon fill="transparent" id="water" points="469,88,473,151,495,199,506,249,502,299,487,320,471,332,487,337,480,353,471,341,447,340,409,335,388,345,378,345,373,333,375,324,390,332,399,326,374,301,369,293,356,293,356,282,369,280,376,215,418,150" />
</svg>
<script>
function calculateScalingFactor(svg) {
// reset the image to its original size
svg.select("image").attr("width", null);
// calculate image size and svg size
let imageBBox = svg.select("image").node().getBoundingClientRect();
let svgBBox = svg.node().getBoundingClientRect();
// calculate scaling factor
let scalingFactor = svgBBox.width / imageBBox.width;
return scalingFactor;
}
function draw() {
let svg = d3.select("svg");
let scalingFactor = calculateScalingFactor(svg);
// make image fit svg width
svg.select("image").attr("width", "100%");
// make svg fit image height
imageBBox = svg.select("image").node().getBoundingClientRect();
svg.attr("height", imageBBox.height + "px")
// scale polygons
svg.selectAll("polygon").attr('transform', `scale(${scalingFactor})`)
}
function initializeEvents() {
var svg = d3.select("svg");
svg.selectAll("polygon").on("click", function() {
alert(this.id);
});
window.onresize = function(event) {
draw();
};
}
draw();
initializeEvents();
</script>
</body>
https://d3js.org/d3.v4.min.js