Android WebView中如何动态缩放本地HTML内的SVG指定矩形至全屏

推荐方案：通过JavaScript操作SVG（精准可控） #

直接在HTML中编写JS逻辑，或通过WebView注入JS，调整SVG的viewBox属性实现自适应，步骤如下：

1. 获取目标Rect的边界信息
   利用SVG元素的getBBox()方法，获取Rect的实际位置和尺寸：

   const targetRect = document.getElementById('your-rect-id');
   const rectBBox = targetRect.getBBox(); // 返回{x, y, width, height}
   

2. 调整SVG的viewBox与尺寸
   将SVG的viewBox设置为Rect的边界，同时把SVG的宽高设为100%，让SVG自动适配WebView容器：

   const svg = targetRect.parentNode;
   // 设置viewBox，使SVG的坐标系统完全匹配Rect的范围
   svg.setAttribute('viewBox', `${rectBBox.x} ${rectBBox.y} ${rectBBox.width} ${rectBBox.height}`);
   // 设置SVG占满容器
   svg.style.width = '100%';
   svg.style.height = '100%';
   

3. WebView端配套设置
   确保WebView允许JS执行，并开启自适应布局：

   WebView webView = findViewById(R.id.webview);
   WebSettings settings = webView.getSettings();
   settings.setJavaScriptEnabled(true);
   settings.setLoadWithOverviewMode(true); // 让页面适配WebView宽度
   settings.setUseWideViewPort(true); // 支持viewport缩放
   webView.loadUrl("file:///android_asset/your-page.html");
   

备选方案：使用WebView.zoomBy（不推荐） #

此方法是对整个页面进行缩放，仅适合页面仅包含目标Rect的场景，步骤如下：

1. 通过JS获取Rect尺寸并传递给Android端
   先在JS中获取Rect的宽高，通过addJavascriptInterface传递给Java层：

   // JS代码
   const rect = document.getElementById('your-rect-id');
   const rectWidth = rect.getBBox().width;
   const rectHeight = rect.getBBox().height;
   // 调用Android端方法传递参数
   AndroidInterface.sendRectSize(rectWidth, rectHeight);
   

2. 计算缩放比例并执行缩放
   在Android端获取WebView可视区域尺寸，计算缩放比例后调用zoomBy：

   // 先重置缩放比例为1.0
   webView.setInitialScale(100);
   // 计算缩放比例：取宽/高比例的较大值，确保Rect填满屏幕
   float scaleX = (float) webView.getWidth() / rectWidth;
   float scaleY = (float) webView.getHeight() / rectHeight;
   float scale = Math.max(scaleX, scaleY);
   // 执行缩放
   webView.zoomBy(scale);
   

之前思路的问题分析 #

用矩形面积比计算缩放比例是错误的，因为缩放是线性比例（基于宽或高的比值），面积比是宽高比例的乘积，会导致缩放比例计算偏差，无法准确适配屏幕。

内容的提问来源于stack exchange，提问作者enumbernine