@versatiles/svg-renderer 0.7.0 → 0.7.2

package/dist/maplibre.js

@@ -9737,12 +9737,12 @@ class SVGRenderer {
                 const [cx, cy] = roundXY(point.x + style.offset[0] * style.size, point.y + style.offset[1] * style.size);
                 elements.push(`<g transform="rotate(${String(style.rotate)},${formatNum(cx)},${formatNum(cy)})">` +
                     `<g transform="translate(${formatNum(iconXr)},${formatNum(iconYr)})${scaleStr}"${opacityAttr}${filterAttr}>` +
-                    `<use href="#${escapeXml(symDef.symbolId)}" />` +
+                    `<use xlink:href="#${escapeXml(symDef.symbolId)}" />` +
                     `</g></g>`);
             }
             else {
                 elements.push(`<g transform="translate(${formatNum(iconXr)},${formatNum(iconYr)})${scaleStr}"${opacityAttr}${filterAttr}>` +
-                    `<use href="#${escapeXml(symDef.symbolId)}" />` +
+                    `<use xlink:href="#${escapeXml(symDef.symbolId)}" />` +
                     `</g>`);
             }
         }
@@ -9775,7 +9775,7 @@ class SVGRenderer {
         const pixelated = style.resampling === 'nearest';
         for (const tile of tiles) {
             const overlap = Math.min(tile.width, tile.height) / 10000; // slight overlap to prevent sub-pixel gaps between tiles
-            let attrs = `x="${formatScaled(tile.x - overlap)}" y="${formatScaled(tile.y - overlap)}" width="${formatScaled(tile.width + overlap * 2)}" height="${formatScaled(tile.height + overlap * 2)}" href="${tile.dataUri}"`;
+            let attrs = `x="${formatScaled(tile.x - overlap)}" y="${formatScaled(tile.y - overlap)}" width="${formatScaled(tile.width + overlap * 2)}" height="${formatScaled(tile.height + overlap * 2)}" xlink:href="${tile.dataUri}"`;
             if (pixelated)
                 attrs += ' style="image-rendering:pixelated"';
             this.#svg.push(`<image ${attrs} />`);
@@ -9788,19 +9788,19 @@ class SVGRenderer {
         // Build defs content
         const defsContent = [`<clipPath id="vb"><rect width="${w}" height="${h}"/></clipPath>`];
         for (const sheet of this.#spriteSheetDefs.values()) {
-            defsContent.push(`<image id="${escapeXml(sheet.defId)}" width="${formatNum(sheet.width)}" height="${formatNum(sheet.height)}" href="${escapeXml(sheet.href)}" />`);
+            defsContent.push(`<image id="${escapeXml(sheet.defId)}" width="${formatNum(sheet.width)}" height="${formatNum(sheet.height)}" xlink:href="${escapeXml(sheet.href)}" />`);
         }
         for (const sym of this.#spriteSymbolDefs.values()) {
             const clipId = `${sym.symbolId}-clip`;
-            defsContent.push(`<clipPath id="${escapeXml(clipId)}"><rect width="${formatNum(sym.width)}" height="${formatNum(sym.height)}" /></clipPath>`, `<symbol id="${escapeXml(sym.symbolId)}"><g clip-path="url(#${escapeXml(clipId)})"><use href="#${escapeXml(sym.sheetDefId)}" x="${formatNum(-sym.x)}" y="${formatNum(-sym.y)}" /></g></symbol>`);
+            defsContent.push(`<clipPath id="${escapeXml(clipId)}"><rect width="${formatNum(sym.width)}" height="${formatNum(sym.height)}" /></clipPath>`, `<symbol id="${escapeXml(sym.symbolId)}"><g clip-path="url(#${escapeXml(clipId)})"><use xlink:href="#${escapeXml(sym.sheetDefId)}" x="${formatNum(-sym.x)}" y="${formatNum(-sym.y)}" /></g></symbol>`);
         }
         for (const { content } of this.#sdfFilterDefs.values()) {
             defsContent.push(content);
         }
         const parts = [
-            `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg">`,
+            `<svg viewBox="0 0 ${w} ${h}" width="${w}" height="${h}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">`,
             `<defs>\n  ${defsContent.join('\n  ')}\n</defs>`,
-            `<g clip-path="url(#vb)">`,
+            `<g id="map" clip-path="url(#vb)">`,
         ];
         if (this.#backgroundColor.alpha > 0) {
             parts.push(`<rect x="-1" y="-1" width="${(this.width + 2).toFixed(0)}" height="${(this.height + 2).toFixed(0)}" ${fillAttr(this.#backgroundColor)} />`);