1. embedding SVG in HTML (I use the <embed> tag embedded)
<div class="wrapper wrapper-content">
<embed id="svg" src="~/Content/test.svg" class="show-style" onload="zoom(this)"/>
</div>
2. Introduction JS file ( SVG-PAN-zoom.js download link above github years )
<script src="~/Content/js/svg-pan-zoom.js"></script>
3. Add js script
<Script type = "text / JavaScript">
function Zoom (obj) {
element Id is obtained here // SVG file id value <g> tag
$ (obj.getSVGDocument (). getElementById ( 'svg') ) the .Show ();
svgPanZoom (obj, {
zoomEnabled: to true, // open zoom
controlIconsEnabled: to true // open the bottom right zoom control function
});
}
</ Script>
Primary reference source https://github.com/ariutta/svg-pan-zoom which comprises a plurality of SVG layout and display of FIG Demo