剪切嵌入SVG内容

我有一个HTML网站，我已经放在SVG图像内联的表“TD”内像这样：剪切嵌入SVG内容

`<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项目，所以任何建议将不胜感激。

来源

2011-09-29 pr0t0

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

来源

2011-09-29 17:24:02 graphicdivine

我没有尝试过，但我需要能够平移图像。 – pr0t0

那么也许你想'overflow：auto'？ – graphicdivine

我认为这样做会的！真棒！我不知道溢出风格属性。 – pr0t0

剪切嵌入SVG内容

回答

相关问题