剪切嵌入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內容

回答

相關問題