|
|
|
@ -59,9 +59,9 @@ async function loadSvg() { |
|
|
|
|
|
|
|
// 等待DOM更新后应用实时数据 |
|
|
|
await nextTick() |
|
|
|
document.querySelector('.svg-container > svg')?.removeAttribute('width') |
|
|
|
document.querySelector('.svg-container > svg')?.removeAttribute('height') |
|
|
|
|
|
|
|
document.querySelector('.svg-container > svg')?.setAttribute('width', '100%') |
|
|
|
document.querySelector('.svg-container > svg')?.setAttribute('height', '100%') |
|
|
|
document.querySelector('.svg-container > svg')?.setAttribute('preserveAspectRatio', 'none') |
|
|
|
// updateRealtimeValues() |
|
|
|
} |
|
|
|
catch (error) { |
|
|
|
@ -76,8 +76,10 @@ async function updateRealtimeValues() { |
|
|
|
return |
|
|
|
try { |
|
|
|
const svgElement = document.querySelector('.svg-container > svg') |
|
|
|
svgElement?.removeAttribute('width') |
|
|
|
svgElement?.removeAttribute('height') |
|
|
|
svgElement?.setAttribute('width', '100%') |
|
|
|
svgElement?.setAttribute('height', '100%') |
|
|
|
svgElement?.setAttribute('preserveAspectRatio', 'none') |
|
|
|
|
|
|
|
// 获取SVG元素 |
|
|
|
if (!svgElement) |
|
|
|
return |
|
|
|
@ -212,9 +214,12 @@ defineExpose({ |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.svg-wrapper { |
|
|
|
width:100%; |
|
|
|
height:100%; |
|
|
|
border: 1px solid #e8e8e8; |
|
|
|
border-radius: 6px; |
|
|
|
overflow: hidden; |
|
|
|
/* overflow: auto; */ |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
/* .svg-controls { |
|
|
|
@ -267,8 +272,16 @@ defineExpose({ |
|
|
|
} |
|
|
|
|
|
|
|
/* SVG内容自适应 */ |
|
|
|
.svg-container > svg { |
|
|
|
max-width: 100%; |
|
|
|
max-height: 100%; |
|
|
|
.svg-container { |
|
|
|
/* max-width: 100%; |
|
|
|
max-height: 100%; */ |
|
|
|
height:100%; |
|
|
|
width:100% |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
svg { |
|
|
|
height:98%; |
|
|
|
width:100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|