Bonjour a tous,

j'essaye de faire une carte avec des tuiles hexagonales. je suis parti sur du svg. je ne compte pas afficher la totalite de la carte, du coup, j'ai fais un system de drag
voici ou j'en suis
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>SVG Test</title>
</head>
<body>
<div id="mapcontainer" style="width:1050px; height:800px; position: relative; overflow: hidden;">
    <svg id="gridSvg" version="1.1" xmlns="http://www.w3.org/2000/svg"
         style="position: absolute; top: 0; left: 0; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;">
        <defs>
            <pattern id="image" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
                <image height="1" width="1"  preserveAspectRatio="xMidYMid" xlink:href="img/tiles/grass1.png" />
            </pattern>
        </defs>
    </svg>
</div>
 
<script type="text/javascript">
    function hexPoints(x, y, radius) {
        let points = [];
        for(let theta=0; theta<Math.PI*2; theta+=Math.PI/3) {
            let pointX = x + radius * Math.sin(theta);
            let pointY = y + radius * Math.cos(theta);
            points.push(pointX.toFixed(2) + ',' + pointY.toFixed(2));
        }
        return points.join(' ');
    }
 
    let radius = 50;
    let cols = 50;
    let rows = 50;
 
    let offset = (Math.sqrt(3) * radius) / 2;
    document.getElementById('gridSvg').style.width = cols*radius*2 + 'px';
    document.getElementById('gridSvg').style.height = rows*radius*2 + 'px';
    for(let col=0; col<cols; col++) {
        for(let row=0; row<rows; row++) {
            let x = radius + offset * col * 2;
            let y = radius + offset * row * Math.sqrt(3);
 
            if(row%2 !== 0) { x += offset; }
            let g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            document.getElementById('gridSvg').appendChild(g);
            let poly = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
            // poly.style.fill = 'url(#image)';//pour apres, pour mettre une image de fond
            poly.style.fill = 'white';
            poly.style.stroke = 'black';
            poly.style.strokeWidth = '1px';
            poly.setAttribute('points', hexPoints(x, y, radius));
            poly.setAttribute('x', col);
            poly.setAttribute('y', row);
            g.appendChild(poly);
 
            let txt = document.createElementNS('http://www.w3.org/2000/svg', 'text');
            txt.textContent = col+':'+row;
            txt.setAttribute('x', hexPoints(x, y, radius/2).split(' ')[0].split(',')[0]);
            txt.setAttribute('y', hexPoints(x, y, radius/2).split(' ')[0].split(',')[1]);
            txt.setAttribute('font-family', 'Verdana');
            txt.setAttribute('font-size', '10');
            g.appendChild(txt);
 
            g.addEventListener('mousedown', function (e) {
                e.stopPropagation();
                mouseLastPos = {
                    x:e.clientX,
                    y:e.clientY
                };
            });
            g.addEventListener('mouseup', function() { mouseLastPos = false; });
            g.addEventListener('mousemove', function(e) { dragMap(e); });
            poly.addEventListener('mouseover', function(event) { event.target.style.fill = 'rgba(255,0,0,.5)'; });
            // poly.addEventListener('mouseout', function(event) { event.target.style.fill = 'white'; });
 
 
        }
    }
 
    let mouseLastPos = false;
    function dragMap(mouse) {
        if(mouseLastPos) {
            document.getElementById('gridSvg').style.top = document.getElementById('gridSvg').style.top.split('px')[0]*1 + (mouse.clientY - mouseLastPos.y);
            document.getElementById('gridSvg').style.left = document.getElementById('gridSvg').style.left.split('px')[0]*1 + (mouse.clientX - mouseLastPos.x);
            mouseLastPos.y = mouse.clientY;
            mouseLastPos.x = mouse.clientX;
        }
    }
</script>
</body>
</html>

cela fonctionne bien... cependant, le navigateur ne semble pouvoir en afficher que ~20x20... au dela, les tuiles ne s'affichent plus (on voit que le navigateur recalcule quand on survole les tuiles)
(si on commente la ligne poly.addEventListener('mouseover', function(event) { event.target.style.fill = 'rgba(255,0,0,.5)'; }); c'est flagrant : on se retrouve avec des tuiles "fantomes" : elle sont bien la, mais le navigateur ne semble pas savoir comment les afficher)

avez-vous deja rencontre ce probleme ?
quelle est la meilleure solution pour faire une carte en hexa ? (svg ou divs)