<z-svg>
<rect x="0" y="0" width="100" height="100" fill="#F00" />
<g transform="translate(20, 20)">
<path d="M50 50 L70 60 100 40Z" fill="#0F0" />
</g>
</z-svg>
Zoombar
<z-svg zoomable>
...
</z-svg>
Linie & Text
slotDefs.onePixel: {{ Number(slotDefs.onePixel).toFixed(3) }} (bleibt gleich gross)
2: zoomt mit
<z-svg zoomable>
<template v-slot:default="{ slotDefs }">
<rect x="0" y="0" width="100" height="100" fill="#F00" />
<g transform="translate(10, 40)">
<path d="M0 0 L80 0" stroke="#000" :stroke-width="slotDefs.onePixel * 2" />
<text fill="#000" :style="`font-size:${slotDefs.onePixel * 20}px`">slotDefs.onePixel: { { slotDefs.onePixel }} (bleibt gleich gross)</text>
</g>
<g transform="translate(10, 60)">
<path d="M0 0 L80 0" stroke="#000" stroke-width="2" />
<text fill="#000" style="font-size:20px">2: zoomt mit</text>
</g>
</template>
</z-svg>
Download
<z-svg zoomable ref="download">
...
</z-svg>
<z-button label="download SVG" @click="$refs.download.download('karte', 'svg')" />
<z-button label="download PNG" @click="$refs.download.download('karte', 'png')" />
<z-button label="download JPEG" @click="$refs.download.download('karte', 'jpeg')" />