如何在网站上使用导出的 SVG 以及如何使其组件交互？
How do I go about using an exported SVG on a site and how do I make its components interactive?
参考图片
Body svg broken in to components
这是一个 body 的 svg，分为头部、肩膀、膝盖和脚趾等部分。
CodePen 示例
window.onload = function () {
const pieces = document.getElementsByTagName('svg');
for (var i = 0; pieces.length; i++) {
let _piece = pieces[i];
_piece.onclick = function(t) {
if (t.target.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.getAttribute('data-position');
if (t.target.parentElement.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.parentElement.getAttribute('data-position');
}
}
}
.human-body {
width: 207px;
position: relative;
padding-top: 240px;
height: 260px;
display: block;
margin: 40px auto;
}
.human-body svg:hover {
cursor: pointer;
}
.human-body svg:hover path {
fill: #ff7d16;
}
.human-body svg {
position: absolute;
left: 50%;
fill: #57c9d5;
}
.human-body svg.head {
margin-left: -28.5px;
top: -6px;
}
.human-body svg.shoulder {
margin-left: -53.5px;
top: 69px;
}
.human-body svg.arm {
margin-left: -78px;
top: 112px;
}
.human-body svg.cheast {
margin-left: -43.5px;
top: 88px;
}
.human-body svg.stomach {
margin-left: -37.5px;
top: 130px;
}
.human-body svg.legs {
margin-left: -46.5px;
top: 205px;
z-index: 9999;
}
.human-body svg.hands {
margin-left: -102.5px;
top: 224px;
}
#area {
display: block;
width: 100%;
clear: both;
padding: 10px;
text-align: center;
font-size: 25px;
font-family: Courier New;
color: #a5a5a5;
}
#area #data {
color: black;
}
<div class="human-body">
<svg data-position="head" class="head" xmlns="http://www.w3.org/2000/svg" width="56.594" height="95.031" viewBox="0 0 56.594 95.031"><path d="M15.92 68.5l8.8 12.546 3.97 13.984-9.254-7.38-4.622-15.848zm27.1 0l-8.8 12.546-3.976 13.988 9.254-7.38 4.622-15.848zm6.11-27.775l.108-11.775-21.16-14.742L8.123 26.133 8.09 40.19l-3.24.215 1.462 9.732 5.208 1.81 2.36 11.63 9.72 11.018 10.856-.324 9.56-10.37 1.918-11.952 5.207-1.81 1.342-9.517zm-43.085-1.84l-.257-13.82L28.226 11.9l23.618 15.755-.216 10.37 4.976-17.085L42.556 2.376 25.49 0 10.803 3.673.002 24.415z"/></svg>
<svg data-position="shoulder" class="shoulder" xmlns="http://www.w3.org/2000/svg" width="109.532" height="46.594" viewBox="0 0 109.532 46.594"><path d="M38.244-.004l1.98 9.232-11.653 2.857-7.474-2.637zm33.032 0l-1.98 9.232 11.653 2.857 7.474-2.637zm21.238 10.54l4.044-2.187 12.656 14 .07 5.33S92.76 10.66 92.515 10.535zm-1.285.58c-.008.28 17.762 18.922 17.762 18.922l.537 16.557-6.157-10.55L91.5 30.988 83.148 15.6zm-74.224-.58L12.962 8.35l-12.656 14-.062 5.325s16.52-17.015 16.764-17.14zm1.285.58C18.3 11.396.528 30.038.528 30.038L-.01 46.595l6.157-10.55 11.87-5.056L26.374 15.6z"/></svg>
<svg data-position="arm" class="arm" xmlns="http://www.w3.org/2000/svg" width="156.344" height="119.25" viewBox="0 0 156.344 119.25"><path d="M21.12 56.5a1.678 1.678 0 0 1-.427.33l.935 8.224 12.977-13.89 1.2-8.958A168.2 168.2 0 0 0 21.12 56.5zm1.387 12.522l-18.07 48.91 5.757 1.333 19.125-39.44 3.518-22.047zm-5.278-18.96l2.638 18.74-17.2 46.023L.01 113.05l6.644-35.518zm118.015 6.44a1.678 1.678 0 0 0 .426.33l-.934 8.222-12.977-13.89-1.2-8.958A168.2 168.2 0 0 1 135.24 56.5zm-1.39 12.52l18.073 48.91-5.758 1.333-19.132-39.44-3.52-22.05zm5.28-18.96l-2.64 18.74 17.2 46.023 2.658-1.775-6.643-35.518zm-103.1-12.323a1.78 1.78 0 0 1 .407-.24l3.666-27.345L33.07.015l-7.258 10.58-6.16 37.04.566 4.973a151.447 151.447 0 0 1 15.808-14.87zm84.3 0a1.824 1.824 0 0 0-.407-.24l-3.666-27.345L123.3.015l7.258 10.58 6.16 37.04-.566 4.973a151.447 151.447 0 0 0-15.822-14.87zM22.288 8.832l-3.3 35.276-2.2-26.238zm111.79 0l3.3 35.276 2.2-26.238z"/></svg>
<svg data-position="cheast" class="cheast" xmlns="http://www.w3.org/2000/svg" width="86.594" height="45.063" viewBox="0 0 86.594 45.063"><path d="M19.32 0l-9.225 16.488-10.1 5.056 6.15 4.836 4.832 14.07 11.2 4.616 17.85-8.828-4.452-34.7zm47.934 0l9.225 16.488 10.1 5.056-6.15 4.836-4.833 14.07-11.2 4.616-17.844-8.828 4.45-34.7z"/></svg>
<svg data-position="stomach" class="stomach" xmlns="http://www.w3.org/2000/svg" width="75.25" height="107.594" viewBox="0 0 75.25 107.594"><path d="M19.25 7.49l16.6-7.5-.5 12.16-14.943 7.662zm-10.322 8.9l6.9 3.848-.8-9.116zm5.617-8.732L1.32 2.15 6.3 15.6zm-8.17 9.267l9.015 5.514 1.54 11.028-8.795-5.735zm15.53 5.89l.332 8.662 12.286-2.665.664-11.826zm14.61 84.783L33.28 76.062l-.08-20.53-11.654-5.736-1.32 37.5zM22.735 35.64L22.57 46.3l11.787 3.166.166-16.657zm-14.16-5.255L16.49 35.9l1.1 11.25-8.8-7.06zm8.79 22.74l-9.673-7.28-.84 9.78L-.006 68.29l10.564 14.594 5.5.883 1.98-20.735zM56 7.488l-16.6-7.5.5 12.16 14.942 7.66zm10.32 8.9l-6.9 3.847.8-9.116zm-5.617-8.733L73.93 2.148l-4.98 13.447zm8.17 9.267l-9.015 5.514-1.54 11.03 8.8-5.736zm-15.53 5.89l-.332 8.662-12.285-2.665-.664-11.827zm-14.61 84.783l3.234-31.536.082-20.532 11.65-5.735 1.32 37.5zm13.78-71.957l.166 10.66-11.786 3.168-.166-16.657zm14.16-5.256l-7.915 5.514-1.1 11.25 8.794-7.06zm-8.79 22.743l9.673-7.28.84 9.78 6.862 12.66-10.564 14.597-5.5.883-1.975-20.74z"/></svg>
<svg data-position="legs" class="legs" xmlns="http://www.w3.org/2000/svg" width="93.626" height="286.625" viewBox="0 0 93.626 286.625"><path d="M17.143 138.643l-.664 5.99 4.647 5.77 1.55 9.1 3.1 1.33 2.655-13.755 1.77-4.88-1.55-3.107zm20.582.444l-3.32 9.318-7.082 13.755 1.77 12.647 5.09-14.2 4.205-7.982zm-26.557-12.645l5.09 27.29-3.32-1.777-2.656 8.875zm22.795 42.374l-1.55 4.88-3.32 20.634-.442 27.51 4.65 26.847-.223-34.39 4.87-13.754.663-15.087zM23.34 181.24l1.106 41.267 8.853 33.28-9.628-4.55-16.045-57.8 5.533-36.384zm15.934 80.536l-.664 18.415-1.55 6.435h-4.647l-1.327-4.437-1.55-.222.332 4.437-5.864-1.778-1.55-.887-6.64-1.442-.22-5.214 6.418-10.87 4.426-5.548 10.844-4.437zM13.63 3.076v22.476l15.71 31.073 9.923 30.85L38.23 66.1zm25.49 30.248l.118-.148-.793-2.024L21.9 12.992l-1.242-.44L31.642 40.93zM32.865 44.09l6.812 17.6 2.274-21.596-1.344-3.43zM6.395 61.91l.827 25.34 12.816 35.257-3.928 10.136L3.5 88.133zM30.96 74.69l.345.826 6.47 15.48-4.177 38.342-6.594-3.526 5.715-35.7zm45.5 63.953l.663 5.99-4.647 5.77-1.55 9.1-3.1 1.33-2.655-13.755-1.77-4.88 1.55-3.107zm-20.582.444l3.32 9.318 7.08 13.755-1.77 12.647-5.09-14.2-4.2-7.987zm3.762 29.73l1.55 4.88 3.32 20.633.442 27.51-4.648 26.847.22-34.39-4.867-13.754-.67-15.087zm10.623 12.424l-1.107 41.267-8.852 33.28 9.627-4.55 16.046-57.8-5.533-36.384zM54.33 261.777l.663 18.415 1.546 6.435h4.648l1.328-4.437 1.55-.222-.333 4.437 5.863-1.778 1.55-.887 6.638-1.442.222-5.214-6.418-10.868-4.426-5.547-10.844-4.437zm25.643-258.7v22.476L64.26 56.625l-9.923 30.85L55.37 66.1zM54.48 33.326l-.118-.15.793-2.023L71.7 12.993l1.24-.44L61.96 40.93zm6.255 10.764l-6.812 17.6-2.274-21.595 1.344-3.43zm26.47 17.82l-.827 25.342-12.816 35.256 3.927 10.136 12.61-44.51zM62.64 74.693l-.346.825-6.47 15.48 4.178 38.342 6.594-3.527-5.715-35.7zm19.792 51.75l-5.09 27.29 3.32-1.776 2.655 8.875zM9.495-.007l.827 21.373-7.028 42.308-3.306-34.155zm2.068 27.323L26.24 59.707l3.307 26-6.2 36.58L9.91 85.046l-.827-38.342zM84.103-.01l-.826 21.375 7.03 42.308 3.306-34.155zm-2.066 27.325L67.36 59.707l-3.308 26 6.2 36.58 13.436-37.24.827-38.34z"/></svg>
<svg data-position="hands" class="hands" xmlns="http://www.w3.org/2000/svg" width="205" height="38.938" viewBox="0 0 205 38.938"><path d="M21.255-.002l2.88 6.9 8.412 1.335.664 12.458-4.427 17.8-2.878-.22 2.8-11.847-2.99-.084-4.676 12.6-3.544-.446 4.4-12.736-3.072-.584-5.978 13.543-4.428-.445 6.088-14.1-2.1-1.25-7.528 12.012-3.764-.445L12.4 12.9l-1.107-1.78L.665 15.57 0 13.124l8.635-7.786zm162.49 0l-2.88 6.9-8.412 1.335-.664 12.458 4.427 17.8 2.878-.22-2.8-11.847 2.99-.084 4.676 12.6 3.544-.446-4.4-12.736 3.072-.584 5.978 13.543 4.428-.445-6.088-14.1 2.1-1.25 7.528 12.012 3.764-.445L192.6 12.9l1.107-1.78 10.628 4.45.665-2.447-8.635-7.786z"/></svg>
</div>
<div id="area">
Area: <span id="data"></span>
</div>
这个 CodePen 是一个类似的 svg 示例，其中 body 被分解成用户可以与之交互的组件，只是没有分解成我需要的那么多部分。
我的问题
我正在寻找类似于上面的 CodePen 示例的 svg 交互式，我唯一的经验是在 Inkscape 中制作它们并将它们用作 img src="blah.svg"。
我了解 JS 部分，但其余部分让我望而却步。
我试过的
我试过从 Inkscape 导出我的 svg，在我的文本编辑器中打开它并使用 CodePen 示例作为基础对其进行修改。
我的问题
如何使我的 svg 像 CodePen 示例中显示的那样工作？
即可突出显示、可点击的 body 组件
如果你能告诉我 'drawing' 我在 html 中的 svg 的过程，或者指导我去某个我可以获取信息的地方，我将不胜感激。抱歉，如果我没有提供足够的信息，但我不是 100% 确定要问什么。
提前致谢。
编辑
它让我将其添加为对问题的编辑，而不是作为回复。至于进一步的说明，我真正想要的是使用我的 SVG 并让它以类似于 CodePen 示例中所示的方式运行。再次抱歉，如果我的问题不清楚，但对这个问题了解不多，所以很难知道要问什么。
这是我的 SVG 代码：
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="207"
height="100%"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
sodipodi:docname="body.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.979899"
inkscape:cx="342.84693"
inkscape:cy="318.08859"
inkscape:document-units="mm"
inkscape:current-layer="Full body"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1680"
inkscape:window-height="1028"
inkscape:window-x="1432"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="Full body"
inkscape:label="SVG"
style="display:inline">
<path
data-part="head"
style="fill:none;stroke:#000000;stroke-width:0.266679px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 103.62544,15.035459 c 8.26218,-0.100026 12.48099,6.901836 12.30482,15.304071 l 1.89306,0.200053 -0.54089,5.30141 -3.31285,1.20032 -1.01412,6.601756 -5.74674,6.201649 H 100.8535 L 95.039139,43.342989 93.822162,37.041313 90.847361,36.2411 89.968474,30.139477 91.793915,29.939424 C 90.566704,21.137082 96.583771,15.135486 103.62544,15.035459 Z"
id="head"
sodipodi:nodetypes="cccccccccccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
data-part="left-chest"
d="m 107.67685,62.206983 9.35444,-1.002263 c 9.45048,11.711603 7.53344,12.764242 7.02335,23.10735 l -8.26046,2.939965 -10.79003,-5.668014 z"
id="left-chest"
sodipodi:nodetypes="cccccc" />
<path
data-part="left-ribs"
id="left-ribs"
d="m 124.6708,86.595325 -8.78275,2.985031 -11.00856,-4.77195 0.70871,16.914434 8.78795,2.59859 6.66183,-3.35454 0.99219,-6.614585 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="left-oblique"
sodipodi:nodetypes="ccccc"
id="left-oblique"
d="m 121.41479,103.09365 -6.62294,3.23106 -0.24765,8.83519 6.95678,-4.11049 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-chest"
sodipodi:nodetypes="cccccc"
id="right-chest"
d="M 100.18164,62.206983 90.8272,61.20472 c -9.450474,11.711603 -7.533438,12.764242 -7.023344,23.10735 l 8.260454,2.939965 10.79002,-5.668014 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-ribs"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 83.254457,86.595325 8.782743,2.985031 11.00856,-4.77195 -0.70871,16.914434 -8.787944,2.59859 -6.66183,-3.35454 -0.992187,-6.614585 z"
id="right-ribs" />
<path
data-part="right-oblique"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 86.784429,103.09365 6.622937,3.23106 0.04725,8.83519 -6.756326,-4.11049 z"
id="right-oblique"
sodipodi:nodetypes="ccccc" />
<path
data-part="stomach"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 104.13489,103.45597 9.18739,2.93997 -0.3675,9.65511 -8.64711,4.24766 -9.326763,-4.31447 -0.200451,-9.75534 z"
id="stomach"
sodipodi:nodetypes="ccccccc" />
<path
data-part="hips"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 86.53424,113.55526 -0.172775,4.56176 -4.109268,7.34992 22.276883,22.89068 21.05419,-22.75705 -4.04245,-7.34991 -0.51162,-4.50068 -16.64899,9.18936 z"
id="hips"
sodipodi:nodetypes="ccccccccc" />
<path
data-part="right-shoulder"
sodipodi:nodetypes="ccccccccccc"
id="right-shoulder"
d="m 94.861265,46.438079 -0.46772,2.338609 -14.777371,6.280833 -7.483547,7.951269 3.87541,3.274051 6.614914,1.603619 4.677217,-8.68626 6.492017,-3.474503 8.352155,6.013564 -2.204967,-8.418992 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-upper-arm"
id="right-upper-arm"
d="m 82.254225,69.42326 -6.629288,-1.74322 -4.112119,-3.537773 -2.619761,37.614113 5.437376,-6.537854 4.126128,8.870844 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
sodipodi:nodetypes="ccccccc" />
<path
data-part="right-elbow"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 74.139256,97.119063 -5.111529,5.746297 3.040191,9.48807 6.247425,-5.77971 z"
id="right-elbow"
sodipodi:nodetypes="ccccc" />
<path
data-part="right-lower-arm"
id="right-lower-arm"
d="m 78.007698,108.5183 -6.575444,6.08677 -3.14793,-11.22858 -6.331117,15.59152 -2.348898,17.6786 3.610917,-0.82867 1.99665,3.75127 11.306845,-18.80582 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
sodipodi:nodetypes="ccccccccc" />
<path
data-part="right-wrist"
sodipodi:nodetypes="ccccccc"
id="right-wrist"
d="m 62.671097,137.09256 1.87089,3.842 -0.55125,2.47225 -4.092557,-0.25057 -1.95441,-3.69166 0.95215,-1.38646 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-hand"
sodipodi:nodetypes="cccccccccccccccccccccccc"
id="right-hand"
d="m 63.28856,144.71571 -4.276307,-0.26727 -2.37202,-4.44335 -7.550354,3.00678 -4.777437,4.34313 0.4009,1.46998 5.679477,-2.27179 0.935437,1.06907 -6.414464,12.12736 2.204977,0.10023 4.309717,-6.74856 0.96885,0.90203 -3.274047,7.6506 2.405427,0.30067 3.44109,-7.68399 1.837477,0.26726 -2.572467,7.38332 2.104747,0.30068 2.67269,-7.3165 1.83748,-0.13364 -1.83748,6.9156 1.9043,0.20046 2.639277,-10.28988 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="left-shoulder"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 113.31154,46.438079 0.46772,2.338609 14.77738,6.280833 7.48355,7.951269 -3.87541,3.274051 -6.61492,1.603619 -4.67722,-8.68626 -6.49202,-3.474503 -8.35217,6.013564 2.20497,-8.418992 z"
id="left-shoulder"
sodipodi:nodetypes="ccccccccccc" />
<path
data-part="left-upper-arm"
sodipodi:nodetypes="ccccccc"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 126.27753,69.42326 6.62929,-1.74322 4.11213,-3.537773 2.61976,37.614113 -5.43738,-6.537857 -4.12613,8.870847 z"
id="left-upper-arm" />
<path
data-part="left-elbow"
sodipodi:nodetypes="ccccc"
id="left-elbow"
d="m 134.3925,97.119063 5.11154,5.746297 -3.04019,9.48807 -6.24744,-5.77971 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="left-lower-arm"
sodipodi:nodetypes="ccccccccc"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 130.59255,108.5183 6.57545,6.08677 3.14793,-11.22858 6.33112,15.59152 2.33744,17.75995 -3.61092,-0.82867 -1.99665,3.75127 -11.29539,-18.88717 z"
id="left-lower-arm" />
<path
data-part="left-wrist"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 145.92916,137.09256 -1.87089,3.842 0.55125,2.47225 4.09256,-0.25057 1.95441,-3.69166 -0.95215,-1.38646 z"
id="left-wrist"
sodipodi:nodetypes="ccccccc" />
<path
data-part="left-hand"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 145.3117,144.71571 4.27631,-0.26727 2.37202,-4.44335 7.55036,3.00678 4.77744,4.34313 -0.4009,1.46998 -5.67948,-2.27179 -0.93544,1.06907 6.41447,12.12736 -2.20498,0.10023 -4.30972,-6.74856 -0.96885,0.90203 3.27405,7.6506 -2.40543,0.30067 -3.44109,-7.68399 -1.83748,0.26726 2.57247,7.38332 -2.10475,0.30068 -2.67269,-7.3165 -1.83748,-0.13364 1.83748,6.9156 -1.9043,0.20046 -2.63928,-10.28988 z"
id="left-hand"
sodipodi:nodetypes="cccccccccccccccccccccccc" />
<path
data-part="left-upper-leg"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 125.61668,128.28937 -18.97614,21.64883 2.93996,54.38935 7.61719,-5.34539 7.21627,5.07812 4.94449,-26.05878 1.33635,-33.67596 z"
id="left-upper-leg"
sodipodi:nodetypes="cccccccc" />
<path
data-part="left-knee"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 109.71414,215.95915 -0.26727,-8.55263 7.88445,-5.61266 7.61718,5.7463 -0.13363,8.01808 -7.21628,5.87993 z"
id="left-knee"
sodipodi:nodetypes="ccccccc" />
<path
data-part="left-lower-leg"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 125.10409,217.59555 -7.43868,6.40972 -8.15172,-6.31425 -1.00226,16.16981 0.53454,9.08717 3.20723,7.88445 -1.45279,22.28933 3.29712,-4.89581 3.50106,3.45351 8.81989,-33.0078 z"
id="left-lower-leg"
sodipodi:nodetypes="ccccccccccc" />
<path
data-part="left-ankle"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 114.24018,270.32595 -3.13538,5.07176 4.02155,3.85479 2.31162,-5.53164 z"
id="left-ankle"
sodipodi:nodetypes="ccccc" />
<path
data-part="left-foot"
sodipodi:nodetypes="cssccccccc"
id="left-foot"
d="m 112.86233,294.63782 c -0.0969,1.04516 2.67851,1.02047 2.87228,0.095 0.27172,-1.29783 0.55497,-0.37031 2.1314,-0.0673 2.85703,0.54923 5.21256,-0.85616 7.29072,-2.56682 0.82712,-1.04681 0.6914,-2.09361 0.26727,-3.14042 l -6.28084,-9.42125 -0.69854,-3.43893 -2.5755,5.91117 -4.27632,-3.80857 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-upper-leg"
sodipodi:nodetypes="cccccccc"
id="right-upper-leg"
d="m 82.612584,128.28937 18.976116,21.64883 -2.939951,54.38935 -7.617178,-5.34539 -7.216267,5.07812 -4.944487,-26.05878 -1.33635,-33.67596 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-knee"
sodipodi:nodetypes="ccccccc"
id="right-knee"
d="m 98.515109,215.95915 0.26727,-8.55263 -7.884438,-5.61266 -7.617177,5.7463 0.13363,8.01808 7.216277,5.87993 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-lower-leg"
sodipodi:nodetypes="ccccccccccc"
id="right-lower-leg"
d="m 82.839165,217.59555 7.438674,6.40972 8.151717,-6.31425 1.00226,16.16981 -0.53454,9.08717 -3.20723,7.88445 1.500039,22.28933 -3.344366,-4.89581 -3.50106,3.45351 -8.819884,-33.0078 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-ankle"
sodipodi:nodetypes="ccccc"
id="right-ankle"
d="m 93.703069,270.32595 3.135377,5.07176 -4.021547,3.85479 -2.31162,-5.53164 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-foot"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 95.080919,294.63782 c 0.0969,1.04516 -2.678507,1.02047 -2.872277,0.095 -0.27172,-1.29783 -0.55497,-0.37031 -2.1314,-0.0673 -2.857027,0.54923 -5.212557,-0.85616 -7.290714,-2.56682 -0.82712,-1.04681 -0.6914,-2.09361 -0.26727,-3.14042 l 6.280834,-9.42125 0.69854,-3.43893 2.5755,5.91117 4.276317,-3.80857 z"
id="right-foot"
sodipodi:nodetypes="cssccccccc" />
</g>
编辑以解决 OP 评论：
同样，你问的不清楚。
…still a little lost as when viewing the SVG code there's a whole lot of additional stuff…
从 GUI 应用程序导出的 SVG 中经常有一堆不必要的垃圾——组、相互抵消的转换、不必要的定义等。
“我如何清理这个 SVG？”对于 SO 来说这个问题太宽泛了，尤其是当我们看不到 SVG 的时候。但是 SVG 的基础知识并不是特别复杂。查看 how to use a path element，您将能够完成大部分您想做的事情。
'sodipodi' 是 Inkscape 的前身，所以我假设在 SVG 中对它的任何引用都是 Inkscape 使用的元数据，如果你在那里打开它的话。 （再一次，没有看到就不可能说。）
<defs> declares reusable elements.
It seems like my entire image is grouped as 1 SVG tag rather than each part within an SVG tag
是否有特殊原因需要每个部分都是自己独立的 SVG？
原答案
Inkscape 有一个 XML 编辑器视图，允许您编辑与特定元素关联的属性——形状或组或其他。您可以使用它来分配合理的 ID 和数据属性，这些属性将在您导出到 SVG 时保留。
以这种方式标记部件使得在 javascript 中访问它们变得相当简单，让您可以在 Inkscape 中进行所有编辑，而不是尝试在文本编辑器中进行 SVG 数学运算，并且它可以全部存在于单个 SVG（除非出于某些原因需要将它们分开？）。
（我没有使用 ID，它们可以在这里省略；只是添加它们以表明您 可以 分配 ID，如果您出于任何原因需要它们。）
注意：Inkscape 有几个 SVG 导出选项。我在这里使用“优化”是因为在我粗略的测试中它产生了最有用的输出。
// find everything in the svg with a data-part attribute
const parts = document.querySelectorAll('svg [data-part]');
// register a click listener on all the parts
parts.forEach(p => p.addEventListener('click', (e) => {
// get the data-part value from the clicked element
const {part} = e.target.dataset
// do whatever you need to do with it
console.log(part);
}))
<?xml version="1.0" encoding="UTF-8"?>
<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd" stroke-width=".26458">
<rect id="bluerect" x="10" y="10" width="20" height="20" fill="#00f" data-part="square"/>
<circle id="redcircle" cx="42" cy="20" r="10" fill="#f00" data-part="circle"/>
</g>
</svg>
参考图片
Body svg broken in to components
这是一个 body 的 svg，分为头部、肩膀、膝盖和脚趾等部分。
CodePen 示例
window.onload = function () {
const pieces = document.getElementsByTagName('svg');
for (var i = 0; pieces.length; i++) {
let _piece = pieces[i];
_piece.onclick = function(t) {
if (t.target.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.getAttribute('data-position');
if (t.target.parentElement.getAttribute('data-position') != null) document.getElementById('data').innerHTML = t.target.parentElement.getAttribute('data-position');
}
}
}
.human-body {
width: 207px;
position: relative;
padding-top: 240px;
height: 260px;
display: block;
margin: 40px auto;
}
.human-body svg:hover {
cursor: pointer;
}
.human-body svg:hover path {
fill: #ff7d16;
}
.human-body svg {
position: absolute;
left: 50%;
fill: #57c9d5;
}
.human-body svg.head {
margin-left: -28.5px;
top: -6px;
}
.human-body svg.shoulder {
margin-left: -53.5px;
top: 69px;
}
.human-body svg.arm {
margin-left: -78px;
top: 112px;
}
.human-body svg.cheast {
margin-left: -43.5px;
top: 88px;
}
.human-body svg.stomach {
margin-left: -37.5px;
top: 130px;
}
.human-body svg.legs {
margin-left: -46.5px;
top: 205px;
z-index: 9999;
}
.human-body svg.hands {
margin-left: -102.5px;
top: 224px;
}
#area {
display: block;
width: 100%;
clear: both;
padding: 10px;
text-align: center;
font-size: 25px;
font-family: Courier New;
color: #a5a5a5;
}
#area #data {
color: black;
}
<div class="human-body">
<svg data-position="head" class="head" xmlns="http://www.w3.org/2000/svg" width="56.594" height="95.031" viewBox="0 0 56.594 95.031"><path d="M15.92 68.5l8.8 12.546 3.97 13.984-9.254-7.38-4.622-15.848zm27.1 0l-8.8 12.546-3.976 13.988 9.254-7.38 4.622-15.848zm6.11-27.775l.108-11.775-21.16-14.742L8.123 26.133 8.09 40.19l-3.24.215 1.462 9.732 5.208 1.81 2.36 11.63 9.72 11.018 10.856-.324 9.56-10.37 1.918-11.952 5.207-1.81 1.342-9.517zm-43.085-1.84l-.257-13.82L28.226 11.9l23.618 15.755-.216 10.37 4.976-17.085L42.556 2.376 25.49 0 10.803 3.673.002 24.415z"/></svg>
<svg data-position="shoulder" class="shoulder" xmlns="http://www.w3.org/2000/svg" width="109.532" height="46.594" viewBox="0 0 109.532 46.594"><path d="M38.244-.004l1.98 9.232-11.653 2.857-7.474-2.637zm33.032 0l-1.98 9.232 11.653 2.857 7.474-2.637zm21.238 10.54l4.044-2.187 12.656 14 .07 5.33S92.76 10.66 92.515 10.535zm-1.285.58c-.008.28 17.762 18.922 17.762 18.922l.537 16.557-6.157-10.55L91.5 30.988 83.148 15.6zm-74.224-.58L12.962 8.35l-12.656 14-.062 5.325s16.52-17.015 16.764-17.14zm1.285.58C18.3 11.396.528 30.038.528 30.038L-.01 46.595l6.157-10.55 11.87-5.056L26.374 15.6z"/></svg>
<svg data-position="arm" class="arm" xmlns="http://www.w3.org/2000/svg" width="156.344" height="119.25" viewBox="0 0 156.344 119.25"><path d="M21.12 56.5a1.678 1.678 0 0 1-.427.33l.935 8.224 12.977-13.89 1.2-8.958A168.2 168.2 0 0 0 21.12 56.5zm1.387 12.522l-18.07 48.91 5.757 1.333 19.125-39.44 3.518-22.047zm-5.278-18.96l2.638 18.74-17.2 46.023L.01 113.05l6.644-35.518zm118.015 6.44a1.678 1.678 0 0 0 .426.33l-.934 8.222-12.977-13.89-1.2-8.958A168.2 168.2 0 0 1 135.24 56.5zm-1.39 12.52l18.073 48.91-5.758 1.333-19.132-39.44-3.52-22.05zm5.28-18.96l-2.64 18.74 17.2 46.023 2.658-1.775-6.643-35.518zm-103.1-12.323a1.78 1.78 0 0 1 .407-.24l3.666-27.345L33.07.015l-7.258 10.58-6.16 37.04.566 4.973a151.447 151.447 0 0 1 15.808-14.87zm84.3 0a1.824 1.824 0 0 0-.407-.24l-3.666-27.345L123.3.015l7.258 10.58 6.16 37.04-.566 4.973a151.447 151.447 0 0 0-15.822-14.87zM22.288 8.832l-3.3 35.276-2.2-26.238zm111.79 0l3.3 35.276 2.2-26.238z"/></svg>
<svg data-position="cheast" class="cheast" xmlns="http://www.w3.org/2000/svg" width="86.594" height="45.063" viewBox="0 0 86.594 45.063"><path d="M19.32 0l-9.225 16.488-10.1 5.056 6.15 4.836 4.832 14.07 11.2 4.616 17.85-8.828-4.452-34.7zm47.934 0l9.225 16.488 10.1 5.056-6.15 4.836-4.833 14.07-11.2 4.616-17.844-8.828 4.45-34.7z"/></svg>
<svg data-position="stomach" class="stomach" xmlns="http://www.w3.org/2000/svg" width="75.25" height="107.594" viewBox="0 0 75.25 107.594"><path d="M19.25 7.49l16.6-7.5-.5 12.16-14.943 7.662zm-10.322 8.9l6.9 3.848-.8-9.116zm5.617-8.732L1.32 2.15 6.3 15.6zm-8.17 9.267l9.015 5.514 1.54 11.028-8.795-5.735zm15.53 5.89l.332 8.662 12.286-2.665.664-11.826zm14.61 84.783L33.28 76.062l-.08-20.53-11.654-5.736-1.32 37.5zM22.735 35.64L22.57 46.3l11.787 3.166.166-16.657zm-14.16-5.255L16.49 35.9l1.1 11.25-8.8-7.06zm8.79 22.74l-9.673-7.28-.84 9.78L-.006 68.29l10.564 14.594 5.5.883 1.98-20.735zM56 7.488l-16.6-7.5.5 12.16 14.942 7.66zm10.32 8.9l-6.9 3.847.8-9.116zm-5.617-8.733L73.93 2.148l-4.98 13.447zm8.17 9.267l-9.015 5.514-1.54 11.03 8.8-5.736zm-15.53 5.89l-.332 8.662-12.285-2.665-.664-11.827zm-14.61 84.783l3.234-31.536.082-20.532 11.65-5.735 1.32 37.5zm13.78-71.957l.166 10.66-11.786 3.168-.166-16.657zm14.16-5.256l-7.915 5.514-1.1 11.25 8.794-7.06zm-8.79 22.743l9.673-7.28.84 9.78 6.862 12.66-10.564 14.597-5.5.883-1.975-20.74z"/></svg>
<svg data-position="legs" class="legs" xmlns="http://www.w3.org/2000/svg" width="93.626" height="286.625" viewBox="0 0 93.626 286.625"><path d="M17.143 138.643l-.664 5.99 4.647 5.77 1.55 9.1 3.1 1.33 2.655-13.755 1.77-4.88-1.55-3.107zm20.582.444l-3.32 9.318-7.082 13.755 1.77 12.647 5.09-14.2 4.205-7.982zm-26.557-12.645l5.09 27.29-3.32-1.777-2.656 8.875zm22.795 42.374l-1.55 4.88-3.32 20.634-.442 27.51 4.65 26.847-.223-34.39 4.87-13.754.663-15.087zM23.34 181.24l1.106 41.267 8.853 33.28-9.628-4.55-16.045-57.8 5.533-36.384zm15.934 80.536l-.664 18.415-1.55 6.435h-4.647l-1.327-4.437-1.55-.222.332 4.437-5.864-1.778-1.55-.887-6.64-1.442-.22-5.214 6.418-10.87 4.426-5.548 10.844-4.437zM13.63 3.076v22.476l15.71 31.073 9.923 30.85L38.23 66.1zm25.49 30.248l.118-.148-.793-2.024L21.9 12.992l-1.242-.44L31.642 40.93zM32.865 44.09l6.812 17.6 2.274-21.596-1.344-3.43zM6.395 61.91l.827 25.34 12.816 35.257-3.928 10.136L3.5 88.133zM30.96 74.69l.345.826 6.47 15.48-4.177 38.342-6.594-3.526 5.715-35.7zm45.5 63.953l.663 5.99-4.647 5.77-1.55 9.1-3.1 1.33-2.655-13.755-1.77-4.88 1.55-3.107zm-20.582.444l3.32 9.318 7.08 13.755-1.77 12.647-5.09-14.2-4.2-7.987zm3.762 29.73l1.55 4.88 3.32 20.633.442 27.51-4.648 26.847.22-34.39-4.867-13.754-.67-15.087zm10.623 12.424l-1.107 41.267-8.852 33.28 9.627-4.55 16.046-57.8-5.533-36.384zM54.33 261.777l.663 18.415 1.546 6.435h4.648l1.328-4.437 1.55-.222-.333 4.437 5.863-1.778 1.55-.887 6.638-1.442.222-5.214-6.418-10.868-4.426-5.547-10.844-4.437zm25.643-258.7v22.476L64.26 56.625l-9.923 30.85L55.37 66.1zM54.48 33.326l-.118-.15.793-2.023L71.7 12.993l1.24-.44L61.96 40.93zm6.255 10.764l-6.812 17.6-2.274-21.595 1.344-3.43zm26.47 17.82l-.827 25.342-12.816 35.256 3.927 10.136 12.61-44.51zM62.64 74.693l-.346.825-6.47 15.48 4.178 38.342 6.594-3.527-5.715-35.7zm19.792 51.75l-5.09 27.29 3.32-1.776 2.655 8.875zM9.495-.007l.827 21.373-7.028 42.308-3.306-34.155zm2.068 27.323L26.24 59.707l3.307 26-6.2 36.58L9.91 85.046l-.827-38.342zM84.103-.01l-.826 21.375 7.03 42.308 3.306-34.155zm-2.066 27.325L67.36 59.707l-3.308 26 6.2 36.58 13.436-37.24.827-38.34z"/></svg>
<svg data-position="hands" class="hands" xmlns="http://www.w3.org/2000/svg" width="205" height="38.938" viewBox="0 0 205 38.938"><path d="M21.255-.002l2.88 6.9 8.412 1.335.664 12.458-4.427 17.8-2.878-.22 2.8-11.847-2.99-.084-4.676 12.6-3.544-.446 4.4-12.736-3.072-.584-5.978 13.543-4.428-.445 6.088-14.1-2.1-1.25-7.528 12.012-3.764-.445L12.4 12.9l-1.107-1.78L.665 15.57 0 13.124l8.635-7.786zm162.49 0l-2.88 6.9-8.412 1.335-.664 12.458 4.427 17.8 2.878-.22-2.8-11.847 2.99-.084 4.676 12.6 3.544-.446-4.4-12.736 3.072-.584 5.978 13.543 4.428-.445-6.088-14.1 2.1-1.25 7.528 12.012 3.764-.445L192.6 12.9l1.107-1.78 10.628 4.45.665-2.447-8.635-7.786z"/></svg>
</div>
<div id="area">
Area: <span id="data"></span>
</div>
这个 CodePen 是一个类似的 svg 示例，其中 body 被分解成用户可以与之交互的组件，只是没有分解成我需要的那么多部分。
我的问题
我正在寻找类似于上面的 CodePen 示例的 svg 交互式，我唯一的经验是在 Inkscape 中制作它们并将它们用作 img src="blah.svg"。 我了解 JS 部分，但其余部分让我望而却步。
我试过的
我试过从 Inkscape 导出我的 svg，在我的文本编辑器中打开它并使用 CodePen 示例作为基础对其进行修改。
我的问题
如何使我的 svg 像 CodePen 示例中显示的那样工作？
即可突出显示、可点击的 body 组件
如果你能告诉我 'drawing' 我在 html 中的 svg 的过程，或者指导我去某个我可以获取信息的地方，我将不胜感激。抱歉，如果我没有提供足够的信息，但我不是 100% 确定要问什么。
提前致谢。
编辑
它让我将其添加为对问题的编辑，而不是作为回复。至于进一步的说明，我真正想要的是使用我的 SVG 并让它以类似于 CodePen 示例中所示的方式运行。再次抱歉，如果我的问题不清楚，但对这个问题了解不多，所以很难知道要问什么。
这是我的 SVG 代码：
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="207"
height="100%"
viewBox="0 0 210 297"
version="1.1"
id="svg8"
sodipodi:docname="body.svg"
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.979899"
inkscape:cx="342.84693"
inkscape:cy="318.08859"
inkscape:document-units="mm"
inkscape:current-layer="Full body"
inkscape:document-rotation="0"
showgrid="false"
inkscape:window-width="1680"
inkscape:window-height="1028"
inkscape:window-x="1432"
inkscape:window-y="-8"
inkscape:window-maximized="1" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:groupmode="layer"
id="Full body"
inkscape:label="SVG"
style="display:inline">
<path
data-part="head"
style="fill:none;stroke:#000000;stroke-width:0.266679px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 103.62544,15.035459 c 8.26218,-0.100026 12.48099,6.901836 12.30482,15.304071 l 1.89306,0.200053 -0.54089,5.30141 -3.31285,1.20032 -1.01412,6.601756 -5.74674,6.201649 H 100.8535 L 95.039139,43.342989 93.822162,37.041313 90.847361,36.2411 89.968474,30.139477 91.793915,29.939424 C 90.566704,21.137082 96.583771,15.135486 103.62544,15.035459 Z"
id="head"
sodipodi:nodetypes="cccccccccccccc" />
<path
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
data-part="left-chest"
d="m 107.67685,62.206983 9.35444,-1.002263 c 9.45048,11.711603 7.53344,12.764242 7.02335,23.10735 l -8.26046,2.939965 -10.79003,-5.668014 z"
id="left-chest"
sodipodi:nodetypes="cccccc" />
<path
data-part="left-ribs"
id="left-ribs"
d="m 124.6708,86.595325 -8.78275,2.985031 -11.00856,-4.77195 0.70871,16.914434 8.78795,2.59859 6.66183,-3.35454 0.99219,-6.614585 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="left-oblique"
sodipodi:nodetypes="ccccc"
id="left-oblique"
d="m 121.41479,103.09365 -6.62294,3.23106 -0.24765,8.83519 6.95678,-4.11049 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-chest"
sodipodi:nodetypes="cccccc"
id="right-chest"
d="M 100.18164,62.206983 90.8272,61.20472 c -9.450474,11.711603 -7.533438,12.764242 -7.023344,23.10735 l 8.260454,2.939965 10.79002,-5.668014 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-ribs"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 83.254457,86.595325 8.782743,2.985031 11.00856,-4.77195 -0.70871,16.914434 -8.787944,2.59859 -6.66183,-3.35454 -0.992187,-6.614585 z"
id="right-ribs" />
<path
data-part="right-oblique"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 86.784429,103.09365 6.622937,3.23106 0.04725,8.83519 -6.756326,-4.11049 z"
id="right-oblique"
sodipodi:nodetypes="ccccc" />
<path
data-part="stomach"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 104.13489,103.45597 9.18739,2.93997 -0.3675,9.65511 -8.64711,4.24766 -9.326763,-4.31447 -0.200451,-9.75534 z"
id="stomach"
sodipodi:nodetypes="ccccccc" />
<path
data-part="hips"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 86.53424,113.55526 -0.172775,4.56176 -4.109268,7.34992 22.276883,22.89068 21.05419,-22.75705 -4.04245,-7.34991 -0.51162,-4.50068 -16.64899,9.18936 z"
id="hips"
sodipodi:nodetypes="ccccccccc" />
<path
data-part="right-shoulder"
sodipodi:nodetypes="ccccccccccc"
id="right-shoulder"
d="m 94.861265,46.438079 -0.46772,2.338609 -14.777371,6.280833 -7.483547,7.951269 3.87541,3.274051 6.614914,1.603619 4.677217,-8.68626 6.492017,-3.474503 8.352155,6.013564 -2.204967,-8.418992 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-upper-arm"
id="right-upper-arm"
d="m 82.254225,69.42326 -6.629288,-1.74322 -4.112119,-3.537773 -2.619761,37.614113 5.437376,-6.537854 4.126128,8.870844 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
sodipodi:nodetypes="ccccccc" />
<path
data-part="right-elbow"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 74.139256,97.119063 -5.111529,5.746297 3.040191,9.48807 6.247425,-5.77971 z"
id="right-elbow"
sodipodi:nodetypes="ccccc" />
<path
data-part="right-lower-arm"
id="right-lower-arm"
d="m 78.007698,108.5183 -6.575444,6.08677 -3.14793,-11.22858 -6.331117,15.59152 -2.348898,17.6786 3.610917,-0.82867 1.99665,3.75127 11.306845,-18.80582 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
sodipodi:nodetypes="ccccccccc" />
<path
data-part="right-wrist"
sodipodi:nodetypes="ccccccc"
id="right-wrist"
d="m 62.671097,137.09256 1.87089,3.842 -0.55125,2.47225 -4.092557,-0.25057 -1.95441,-3.69166 0.95215,-1.38646 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-hand"
sodipodi:nodetypes="cccccccccccccccccccccccc"
id="right-hand"
d="m 63.28856,144.71571 -4.276307,-0.26727 -2.37202,-4.44335 -7.550354,3.00678 -4.777437,4.34313 0.4009,1.46998 5.679477,-2.27179 0.935437,1.06907 -6.414464,12.12736 2.204977,0.10023 4.309717,-6.74856 0.96885,0.90203 -3.274047,7.6506 2.405427,0.30067 3.44109,-7.68399 1.837477,0.26726 -2.572467,7.38332 2.104747,0.30068 2.67269,-7.3165 1.83748,-0.13364 -1.83748,6.9156 1.9043,0.20046 2.639277,-10.28988 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="left-shoulder"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 113.31154,46.438079 0.46772,2.338609 14.77738,6.280833 7.48355,7.951269 -3.87541,3.274051 -6.61492,1.603619 -4.67722,-8.68626 -6.49202,-3.474503 -8.35217,6.013564 2.20497,-8.418992 z"
id="left-shoulder"
sodipodi:nodetypes="ccccccccccc" />
<path
data-part="left-upper-arm"
sodipodi:nodetypes="ccccccc"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 126.27753,69.42326 6.62929,-1.74322 4.11213,-3.537773 2.61976,37.614113 -5.43738,-6.537857 -4.12613,8.870847 z"
id="left-upper-arm" />
<path
data-part="left-elbow"
sodipodi:nodetypes="ccccc"
id="left-elbow"
d="m 134.3925,97.119063 5.11154,5.746297 -3.04019,9.48807 -6.24744,-5.77971 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="left-lower-arm"
sodipodi:nodetypes="ccccccccc"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 130.59255,108.5183 6.57545,6.08677 3.14793,-11.22858 6.33112,15.59152 2.33744,17.75995 -3.61092,-0.82867 -1.99665,3.75127 -11.29539,-18.88717 z"
id="left-lower-arm" />
<path
data-part="left-wrist"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 145.92916,137.09256 -1.87089,3.842 0.55125,2.47225 4.09256,-0.25057 1.95441,-3.69166 -0.95215,-1.38646 z"
id="left-wrist"
sodipodi:nodetypes="ccccccc" />
<path
data-part="left-hand"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 145.3117,144.71571 4.27631,-0.26727 2.37202,-4.44335 7.55036,3.00678 4.77744,4.34313 -0.4009,1.46998 -5.67948,-2.27179 -0.93544,1.06907 6.41447,12.12736 -2.20498,0.10023 -4.30972,-6.74856 -0.96885,0.90203 3.27405,7.6506 -2.40543,0.30067 -3.44109,-7.68399 -1.83748,0.26726 2.57247,7.38332 -2.10475,0.30068 -2.67269,-7.3165 -1.83748,-0.13364 1.83748,6.9156 -1.9043,0.20046 -2.63928,-10.28988 z"
id="left-hand"
sodipodi:nodetypes="cccccccccccccccccccccccc" />
<path
data-part="left-upper-leg"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 125.61668,128.28937 -18.97614,21.64883 2.93996,54.38935 7.61719,-5.34539 7.21627,5.07812 4.94449,-26.05878 1.33635,-33.67596 z"
id="left-upper-leg"
sodipodi:nodetypes="cccccccc" />
<path
data-part="left-knee"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 109.71414,215.95915 -0.26727,-8.55263 7.88445,-5.61266 7.61718,5.7463 -0.13363,8.01808 -7.21628,5.87993 z"
id="left-knee"
sodipodi:nodetypes="ccccccc" />
<path
data-part="left-lower-leg"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 125.10409,217.59555 -7.43868,6.40972 -8.15172,-6.31425 -1.00226,16.16981 0.53454,9.08717 3.20723,7.88445 -1.45279,22.28933 3.29712,-4.89581 3.50106,3.45351 8.81989,-33.0078 z"
id="left-lower-leg"
sodipodi:nodetypes="ccccccccccc" />
<path
data-part="left-ankle"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 114.24018,270.32595 -3.13538,5.07176 4.02155,3.85479 2.31162,-5.53164 z"
id="left-ankle"
sodipodi:nodetypes="ccccc" />
<path
data-part="left-foot"
sodipodi:nodetypes="cssccccccc"
id="left-foot"
d="m 112.86233,294.63782 c -0.0969,1.04516 2.67851,1.02047 2.87228,0.095 0.27172,-1.29783 0.55497,-0.37031 2.1314,-0.0673 2.85703,0.54923 5.21256,-0.85616 7.29072,-2.56682 0.82712,-1.04681 0.6914,-2.09361 0.26727,-3.14042 l -6.28084,-9.42125 -0.69854,-3.43893 -2.5755,5.91117 -4.27632,-3.80857 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-upper-leg"
sodipodi:nodetypes="cccccccc"
id="right-upper-leg"
d="m 82.612584,128.28937 18.976116,21.64883 -2.939951,54.38935 -7.617178,-5.34539 -7.216267,5.07812 -4.944487,-26.05878 -1.33635,-33.67596 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-knee"
sodipodi:nodetypes="ccccccc"
id="right-knee"
d="m 98.515109,215.95915 0.26727,-8.55263 -7.884438,-5.61266 -7.617177,5.7463 0.13363,8.01808 7.216277,5.87993 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-lower-leg"
sodipodi:nodetypes="ccccccccccc"
id="right-lower-leg"
d="m 82.839165,217.59555 7.438674,6.40972 8.151717,-6.31425 1.00226,16.16981 -0.53454,9.08717 -3.20723,7.88445 1.500039,22.28933 -3.344366,-4.89581 -3.50106,3.45351 -8.819884,-33.0078 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-ankle"
sodipodi:nodetypes="ccccc"
id="right-ankle"
d="m 93.703069,270.32595 3.135377,5.07176 -4.021547,3.85479 -2.31162,-5.53164 z"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
<path
data-part="right-foot"
style="fill:none;stroke:#000000;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 95.080919,294.63782 c 0.0969,1.04516 -2.678507,1.02047 -2.872277,0.095 -0.27172,-1.29783 -0.55497,-0.37031 -2.1314,-0.0673 -2.857027,0.54923 -5.212557,-0.85616 -7.290714,-2.56682 -0.82712,-1.04681 -0.6914,-2.09361 -0.26727,-3.14042 l 6.280834,-9.42125 0.69854,-3.43893 2.5755,5.91117 4.276317,-3.80857 z"
id="right-foot"
sodipodi:nodetypes="cssccccccc" />
</g>
编辑以解决 OP 评论：
同样，你问的不清楚。
…still a little lost as when viewing the SVG code there's a whole lot of additional stuff…
从 GUI 应用程序导出的 SVG 中经常有一堆不必要的垃圾——组、相互抵消的转换、不必要的定义等。
“我如何清理这个 SVG？”对于 SO 来说这个问题太宽泛了，尤其是当我们看不到 SVG 的时候。但是 SVG 的基础知识并不是特别复杂。查看 how to use a path element，您将能够完成大部分您想做的事情。
'sodipodi' 是 Inkscape 的前身，所以我假设在 SVG 中对它的任何引用都是 Inkscape 使用的元数据，如果你在那里打开它的话。 （再一次，没有看到就不可能说。）
<defs> declares reusable elements.
It seems like my entire image is grouped as 1 SVG tag rather than each part within an SVG tag
是否有特殊原因需要每个部分都是自己独立的 SVG？
原答案
Inkscape 有一个 XML 编辑器视图，允许您编辑与特定元素关联的属性——形状或组或其他。您可以使用它来分配合理的 ID 和数据属性，这些属性将在您导出到 SVG 时保留。
以这种方式标记部件使得在 javascript 中访问它们变得相当简单，让您可以在 Inkscape 中进行所有编辑，而不是尝试在文本编辑器中进行 SVG 数学运算，并且它可以全部存在于单个 SVG（除非出于某些原因需要将它们分开？）。
（我没有使用 ID，它们可以在这里省略；只是添加它们以表明您 可以 分配 ID，如果您出于任何原因需要它们。）
注意：Inkscape 有几个 SVG 导出选项。我在这里使用“优化”是因为在我粗略的测试中它产生了最有用的输出。
// find everything in the svg with a data-part attribute
const parts = document.querySelectorAll('svg [data-part]');
// register a click listener on all the parts
parts.forEach(p => p.addEventListener('click', (e) => {
// get the data-part value from the clicked element
const {part} = e.target.dataset
// do whatever you need to do with it
console.log(part);
}))
<?xml version="1.0" encoding="UTF-8"?>
<svg width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd" stroke-width=".26458">
<rect id="bluerect" x="10" y="10" width="20" height="20" fill="#00f" data-part="square"/>
<circle id="redcircle" cx="42" cy="20" r="10" fill="#f00" data-part="circle"/>
</g>
</svg>