I have an html site where I've placed an SVG image inline within a table 'td' like this:
`<td><svg id="mySVG" preserveAspectRatio="xMinYMin meet" viewBox="0 0 500 500" height="100%"><path d="M140.034,...</svg></td>`
I've included zoom-in/zoom-out control buttons like this:
<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 />
And adjusting that zoom level with a js function:
function zoomIn() {
var mySVG = document.getElementById('mySVG');
var curHt = mySVG.getAttribute("height");
var newHt = parseFloat(curHt) + 10 + "%";
mySVG.setAttribute("height", newHt);}
This works, but because I'm zooming the whole SVG, it overlaps everything else on the page when zoomed-in, and I'd like to keep the image within the confines of the 'td'. I tried wrapping the whole thing in a 'clip-path', but I must not have done it properly; the whole image disappeared.
I'm sure this probably isn't the best way to achieve my goal. This is my first JS/SVG project, so any advice would be greatly appreciated.
Have you tried setting a style of overflow:hidden on the containing TD?