我有一个 html 网站，我在其中将 SVG 图像内嵌在一个表 'td' 中，如下所示：
`<td><svg id="mySVG" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500" height="100%"><path d="M140.034,...</svg></td>`
我已经包含了像这样的放大/缩小控制按钮：
<input type=button value="Zoom In" class="svgCtrl" onClick="zoomIn()"><br />
<input type=button value="Reset Zoom" class="svgCtrl" onClick="resetZoom()"><br />
<input type=button value="Zoom Out" class="svgCtrl" onClick="zoomOut()"><br />
并使用 js 函数调整缩放级别：
function zoomIn() {
var mySVG = document.getElementById('mySVG');
var curHt = mySVG.getAttribute("height");
var newHt = parseFloat(curHt) + 10 + "%";
mySVG.setAttribute("height", newHt);}
这可行，但是因为我正在缩放整个 SVG，所以在放大时它会与页面上的所有其他内容重叠，我希望将图像保持在“td”的范围内。我尝试将整个东西包裹在“剪辑路径”中，但我一定做得不对；整个图像消失了。
我确信这可能不是实现我的目标的最佳方式。这是我的第一个 JS/SVG 项目，因此将不胜感激任何建议。