Question

我有一个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项目，因此非常感谢任何建议。

Answer 1

您是否尝试在包含TD上设置overflow:hidden样式？

剪切嵌入式svg内容

1 个答案: