У меня есть 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, он перекрывает все остальное на страницеувеличено, и я хотел бы сохранить изображение в пределах «тд».Я попытался обернуть все это в «путь клипа», но я, должно быть, не сделал это должным образом;все изображение исчезло.
Я уверен, что это, вероятно, не лучший способ достичь моей цели.Это мой первый проект JS / SVG, поэтому любые советы будут с благодарностью.