Visionneuse de tableau avec zoom et minicarte

<div class="uvq13-art"><svg class="def" aria-hidden="true" width="0" height="0"><symbol id="uvq13-art-p" viewBox="0 0 400 300"><rect width="400" height="300" fill="#efe6d2"/><rect x="250" y="160" width="134" height="124" fill="#1f2937"/><g fill="#f8f5ec"><rect x="271" y="176" width="9" height="9"/><rect x="289" y="176" width="9" height="9"/><rect x="307" y="176" width="9" height="9"/><rect x="262" y="185" width="9" height="9"/><rect x="280" y="185" width="9" height="9"/><rect x="298" y="185" width="9" height="9"/><rect x="271" y="194" width="9" height="9"/><rect x="289" y="194" width="9" height="9"/><rect x="307" y="194" width="9" height="9"/><rect x="262" y="203" width="9" height="9"/><rect x="280" y="203" width="9" height="9"/><rect x="298" y="203" width="9" height="9"/></g><circle cx="130" cy="125" r="88" fill="#1e3a8a"/><circle cx="130" cy="125" r="56" fill="none" stroke="#f59e0b" stroke-width="10"/><circle cx="130" cy="125" r="20" fill="#dc2626"/><path d="M20 270L380 40" stroke="#111" stroke-width="3"/><path d="M60 292L330 10" stroke="#111" stroke-width="1.2"/><path d="M226 286l60-104 60 104z" fill="#facc15" fill-opacity=".92"/><g fill="#111"><circle cx="234.4" cy="97.0" r="1.9"/><circle cx="334.6" cy="129.1" r="2.4"/><circle cx="285.9" cy="34.5" r="2.7"/><circle cx="325.4" cy="67.5" r="2.5"/><circle cx="287.0" cy="36.5" r="1.4"/><circle cx="337.3" cy="74.2" r="1.9"/><circle cx="259.5" cy="81.8" r="1.1"/><circle cx="245.2" cy="122.1" r="2.8"/><circle cx="259.0" cy="37.3" r="1.5"/><circle cx="306.1" cy="53.4" r="1.3"/><circle cx="265.0" cy="135.3" r="2.8"/><circle cx="263.6" cy="32.2" r="1.3"/><circle cx="285.8" cy="54.8" r="2.4"/><circle cx="313.2" cy="110.3" r="2.0"/><circle cx="356.9" cy="33.8" r="2.0"/><circle cx="282.1" cy="63.6" r="1.3"/><circle cx="349.5" cy="94.7" r="2.1"/><circle cx="286.3" cy="134.6" r="1.1"/><circle cx="266.5" cy="84.1" r="1.0"/><circle cx="314.4" cy="134.1" r="2.3"/><circle cx="341.8" cy="101.5" r="1.8"/><circle cx="334.0" cy="129.6" r="1.2"/><circle cx="303.2" cy="128.7" r="0.9"/><circle cx="305.4" cy="130.7" r="2.0"/><circle cx="328.7" cy="61.9" r="2.4"/><circle cx="296.8" cy="68.3" r="1.7"/><circle cx="320.4" cy="50.5" r="2.8"/><circle cx="249.3" cy="46.0" r="1.7"/><circle cx="372.5" cy="37.3" r="1.3"/><circle cx="293.5" cy="127.1" r="0.9"/><circle cx="334.9" cy="128.6" r="1.7"/><circle cx="292.9" cy="48.6" r="2.4"/><circle cx="275.2" cy="109.6" r="2.6"/><circle cx="232.7" cy="40.7" r="1.6"/><circle cx="258.9" cy="79.7" r="1.9"/><circle cx="343.6" cy="80.4" r="2.8"/><circle cx="281.5" cy="74.1" r="1.7"/><circle cx="350.4" cy="43.6" r="1.8"/><circle cx="317.4" cy="117.6" r="2.5"/><circle cx="269.1" cy="106.9" r="1.4"/><circle cx="297.6" cy="92.9" r="0.8"/><circle cx="347.9" cy="80.6" r="2.4"/><circle cx="249.7" cy="60.9" r="2.1"/><circle cx="329.9" cy="130.3" r="2.2"/><circle cx="341.4" cy="37.8" r="0.7"/><circle cx="369.9" cy="135.3" r="0.7"/></g><g stroke="#b91c1c" stroke-width="1.4"><path d="M36 292l30-60"/><path d="M42 292l30-60"/><path d="M48 292l30-60"/><path d="M54 292l30-60"/><path d="M60 292l30-60"/><path d="M66 292l30-60"/><path d="M72 292l30-60"/><path d="M78 292l30-60"/><path d="M84 292l30-60"/><path d="M90 292l30-60"/><path d="M96 292l30-60"/><path d="M102 292l30-60"/><path d="M108 292l30-60"/><path d="M114 292l30-60"/></g><rect x="18" y="18" width="70" height="26" fill="#dc2626"/><path d="M300 58q6-6 12 0q6-6 12 0" fill="none" stroke="#111" stroke-width="1.2"/><text x="340" y="294" font-size="6" font-family="Georgia,serif" font-style="italic" fill="#3f3f46">M. Ferrer 1923</text></symbol></svg><div class="wall"><button type="button" class="fire" aria-haspopup="dialog" aria-label="Agrandir le tableau"><svg viewBox="0 0 400 300" aria-hidden="true"><use href="#uvq13-art-p"/></svg></button><p class="pl"><b>Composition en bleu</b><small>Huile sur toile · 1923</small></p></div><div class="vw" role="dialog" aria-modal="true" aria-label="Composition en bleu"><div class="vp" tabindex="0" role="group" aria-label="Tableau zoomable"><div class="cv"><svg viewBox="0 0 400 300" width="400" height="300" aria-hidden="true"><use href="#uvq13-art-p"/></svg></div></div><div class="cap"><b>Composition en bleu</b><small>Huile sur toile · 1923</small></div><p class="hn">Glisse pour déplacer · molette ou pincement pour zoomer</p><div class="tb"><button type="button" class="zo" aria-label="Zoom arrière">−</button><output>100 %</output><button type="button" class="zi" aria-label="Zoom avant">+</button><button type="button" class="ft">Ajuster</button></div><div class="mm" aria-hidden="true"><svg viewBox="0 0 400 300"><use href="#uvq13-art-p"/></svg><i class="mr"></i></div><button type="button" class="x" aria-label="Fermer"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></div></div>