how to solve svg path stoke width different thickness - css

I have a square hexagonal svg image, and i set stroke-width 4px for it.
But the stroke thickness is not consistent, the vertical lines are thinner and the slanted lines are thicker.
demo image
<svg width="173" height="199" viewBox="0 0 173 199" fill="none" xmlns="http://www.w3.org/2000/svg">
<path stroke='#5088ff' stroke-width="4px" vector-effect="non-scaling-stroke" stroke-linecap="square" d="M86.5 0L173 50V150L86.5 199L0 150V50L86.5 0Z"/>
</svg>
I have searched and tried vector-effect="non-scaling-stroke", it does't work.


Make sure that the stroke is not outside the viewBox. A stroke will be painted equal inside and outside the path outline.
Here I moved the path using transform/translate and make the width and the height of the viewBox larger.
<svg width="200" viewBox="0 0 177 203" fill="none"
xmlns="http://www.w3.org/2000/svg">
<path stroke='#5088ff' transform="translate(2 2)" stroke-width="4"
vector-effect="non-scaling-stroke" stroke-linecap="square"
d="M 86.5 0 L 173 50 V 150 L 86.5 199 L 0 150 V 50 L 86.5 0 Z"/>
</svg>

Related

Cut corners of container using CSS

Im trying to cut the corners of a container using css like this
what im trying to achieve
I tried using clip-path but I cant manage to make the cuts rounded like in the picture above
what i have so far
clip-path: polygon(0 0,100% 0,100% calc(100% - 50px),calc(100% - 100px) calc(100% - 50px),calc(100% - 120.40px) 100%,0 100%);

I don't think you can do that with polygon clip-path only, there are outer angles and inside angles...
With svg it can be possible but a bit tricky.
First needed to design the svg shape by itself (red fill is only to view something in the svg editor: inkscape here).
<svg id="clipContainer" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<path style="fill:#ff0000;stroke:none;"
d="m 35,0 h 654.05318 c 6.84803,0 13.02979,2.8828963 16.6429,6.7452744 l 63.1577,76.5094516 C 772.54893,87.959545 779.6304,90 785,90 h 350 c 5.6694,-0.04033 12.8528,-3.528812 17.4966,-8.545814 L 1213.8538,7.1954094 C 1219.2498,1.0400203 1224.6973,0 1230.1965,0 H 1885 c 18.8682,0 35,16.120082 35,35 v 875 c -0.2052,10.54136 -8.9432,19.77096 -20,20 h -608.8105 c -13.0687,-0.12776 -25.0997,3.20977 -33.0435,11.97991 L 1147.2068,1064.9984 C 1134.8748,1081.5357 1126.0043,1080 1106.409,1080 H 35 C 16.13187,1080 0,1063.8799 0,1045 V 35 C 0,16.120082 16.13187,0 35,0 Z"/>
</svg>
now have to put it in HTML body but as a clip-path:
<div class="container">
</div>
<svg width="0" height="0">
<defs>
<clipPath id="svg-clip">
<path style="fill:#ff0000;stroke:none;"
d="m 0.01822917,0 h 0.34065265 c 0.003567,0 0.006786,0.00266925 0.008668,0.0062454 l 0.0328946,0.07083957 c 0.001926,0.0043561 0.005613,0.0062455 0.008408,0.0062455 h 0.18229167 c 0.002953,-3.739e-5 0.006695,-0.0032675 0.009113,-0.0079124 L 0.63221469,0.00666224 C 0.63502588,9.6294739e-4 0.63786313,0 0.64072729,0 H 0.98177075 C 0.99159837,0 1,0.01492547 1,0.03240625 v 0.8101562 c -1.0691e-4,0.009762 -0.004658,0.0183059 -0.0104162,0.0185171 H 0.67249445 c -0.006807,-1.1867e-4 -0.0130727,0.00297 -0.0172102,0.0110924 l -0.0577808,0.11390178 c -0.006423,0.0153109 -0.0110433,0.0138917 -0.0212488,0.0138917 H 0.01822917 C 0.00840202,0.99996424 0,0.98503874 0,0.96755799 V 0.03240625 C 0,0.01492547 0.00840202,0 0.01822917,0 Z"/>
</clipPath>
</defs>
</svg>
plus a bit of css saying container using the clip-path svg-clip:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
}
.container {
position: relative;
width: 90vw;
height: 90vh;
background-color: #222222;
border-radius: 2vw;
clip-path: url(#svg-clip);
}
Now the problem is the scale! That works but not really following the scale of the container. We will use clipPathUnits="objectBoundingBox" but to do so we need to have value of the path between 0 and 1 (yes yes 1 px!!!). So after edit in inkscape the svg is:
<svg id="clipContainer" width="1920" height="1080" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg">
<path style="fill:#ff0000;stroke:none;"
d="m 0.01822917,0 h 0.34065265 c 0.003567,0 0.006786,0.00266925 0.008668,0.0062454 l 0.0328946,0.07083957 c 0.001926,0.0043561 0.005613,0.0062455 0.008408,0.0062455 h 0.18229167 c 0.002953,-3.739e-5 0.006695,-0.0032675 0.009113,-0.0079124 L 0.63221469,0.00666224 C 0.63502588,9.6294739e-4 0.63786313,0 0.64072729,0 H 0.98177075 C 0.99159837,0 1,0.01492547 1,0.03240625 v 0.8101562 c -1.0691e-4,0.009762 -0.004658,0.0183059 -0.0104162,0.0185171 H 0.67249445 c -0.006807,-1.1867e-4 -0.0130727,0.00297 -0.0172102,0.0110924 l -0.0577808,0.11390178 c -0.006423,0.0153109 -0.0110433,0.0138917 -0.0212488,0.0138917 H 0.01822917 C 0.00840202,0.99996424 0,0.98503874 0,0.96755799 V 0.03240625 C 0,0.01492547 0.00840202,0 0.01822917,0 Z"/>
</svg>
That gives the following snippet:
body {
display: flex;
justify-content: center;
align-items: center;
background-color: grey;
}
.container {
position: relative;
width: 90vw;
height: 90vh;
background-color: #222222;
border-radius: 2vw;
clip-path: url(#svg-clip);
}
<div class="container">
</div>
<svg width="0" height="0">
<defs>
<clipPath id="svg-clip" clipPathUnits="objectBoundingBox">
<path style="fill:#ff0000;stroke:none;"
d="m 0.01822917,0 h 0.34065265 c 0.003567,0 0.006786,0.00266925 0.008668,0.0062454 l 0.0328946,0.07083957 c 0.001926,0.0043561 0.005613,0.0062455 0.008408,0.0062455 h 0.18229167 c 0.002953,-3.739e-5 0.006695,-0.0032675 0.009113,-0.0079124 L 0.63221469,0.00666224 C 0.63502588,9.6294739e-4 0.63786313,0 0.64072729,0 H 0.98177075 C 0.99159837,0 1,0.01492547 1,0.03240625 v 0.8101562 c -1.0691e-4,0.009762 -0.004658,0.0183059 -0.0104162,0.0185171 H 0.67249445 c -0.006807,-1.1867e-4 -0.0130727,0.00297 -0.0172102,0.0110924 l -0.0577808,0.11390178 c -0.006423,0.0153109 -0.0110433,0.0138917 -0.0212488,0.0138917 H 0.01822917 C 0.00840202,0.99996424 0,0.98503874 0,0.96755799 V 0.03240625 C 0,0.01492547 0.00840202,0 0.01822917,0 Z"/>
</clipPath>
</defs>
</svg>

Strange diagonal viewBox SVG Behaviour

Trying to figure out how this svg viewBox thing works but sadly the code below is breaking all logic we know lol. Please someone explain if this is a bug or it's the correct svg behaviour. I can't see what I'm getting wrong...
<svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>
This my svg symbol here and I'm trying to stack more of them (both horizzontally and vertically)
//vertical stack ->viewBox = 0, 0, 10*1, 7*2
<svg viewBox="0 0 10 14">
<use href="#Atom"/>
<use href="#Atom" y="7"/>
</svg>
//horizontal stack ->viewBox = 0, 0, 10*2, 7*1
<svg viewBox="0 0 20 7">
<use href="#Atom"/>
<use href="#Atom" x="10"/>
</svg>
//"diagonal" stack ->viewBox = 0, 0, 10*2, 7*2
<svg viewBox="0 0 20 14">
<use href="#Atom"/>
<use href="#Atom" x="10"/>
<use href="#Atom" y="7"/>
</svg>
First one is 2 symbols in vertical so I kept the same viewBox as the symbol but doubling the height from 7 to 14. Works perfectly.
Second one is 2 symbols in horizontal so I kept the same viewBox as the symbol but doubled the width from 10 to 20. Works as well.
Third one is 2 symbols in horizontal and 2 symbols in vertical making both viewBox's width and height twice as the original. This doesn't work.
As you can see from the image the symbols get all messed up togheter (seems like I have a wrong viewBox)
This is kinda what I'm looking for (though as you can see I'm using overflow: visible and the symbols goes out of the viewbox)
Can somebody explain me what I'm getting wrong here? Any help is really appreciated.
Here's a codepen for playing with this stuff

your symbol want to take full width or height
when you stretch only one dimension of viewport then it fit nicely because it take full width or height and stops from stretching in other direction because it want to preserve aspect ratio.
But in this svg viewport is 2x bigger than symbol so it take it all
here is simple solution
.svg {
max-width: 200px;
border: 1px solid red;
}
<svg class="svg" viewBox="0 0 20 14">
<use href="#Atom" x="0" y="0" width="50%" />
<use href="#Atom" x="0" y="7" width="50%" />
<use href="#Atom" x="10" y="0" width="50%" />
<use href="#Atom" x="10" y="7" width="50%" />
</svg>
<svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>
UPDATE:
if you doesn't want to manually add width to use tag AND you are creating them programmatically then (I assumed that you use javascript but you could use same logic for other language) you just want to calc rows and columns in your viewport and calculate width and height of every use
here is an example
const config = {
svg: {
width: 20,
height: 14,
rows: 2,
cols: 2,
symbol: '#Atom'
}
}
const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('viewBox', '0 0 '+config.svg.width+' '+config.svg.height);
for (let i = 0; i < config.svg.rows; i++) {
for (let j = 0; j < config.svg.cols; j++) {
const xPosition = (config.svg.width / config.svg.rows) * i;
const yPosition = (config.svg.height / config.svg.cols) * j;
const width = (100 / config.svg.rows);
const height = (100 / config.svg.cols);
const svgUse = document.createElementNS('http://www.w3.org/2000/svg', 'use');
svgUse.setAttribute('href', config.svg.symbol);
svgUse.setAttribute('x', xPosition);
svgUse.setAttribute('y', yPosition);
svgUse.setAttribute('width', width + '%');
svgUse.setAttribute('height', height + '%');
svg.append(svgUse);
}
}
document.body.prepend(svg)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<svg class="symbol"><symbol id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"></path></symbol></svg>
</body>
</html>

So I ended up replying to myself but I really want to thanks #ciekals11 for its input.
The solution to get the result I wanted was to specify width and height attributes in my symbol. This makes everything works perfectly. Not sure why it does need this, but anyway I'll share my symbol again so you can see the difference.
<svg class="symbol"><symbol width="10" height="7" id="Atom" preserveAspectRatio="xMinYMin meet" viewBox="0 0 10 7"><path d="M3 6 4 7 6 7 4 4 5 3 8 7 10 7 5 0 0 7 2 7Z"/></symbol></svg>

Pure CSS interactive human body

I am trying to create a human body, that shows on click a belonging section. Currently this is done via Javascript and for testing its just the name of the belonging body part.
I wondering if there is a way to do this interactive human body with css only? Any idea to achive that?
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>

maybe you can create something like this with :active state? just my first idea
p {
padding: 5px;
border: 1px solid #000;
background-color: #fff;
display: none;
}
p:target {
display: inline-block;
}
<div>
<a href="#head">
<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>
</a>
<a href="#shoulder">
<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></a>
</div>
<div class="area">
<p id="head">Head</p>
<p id="shoulder">Shoulder</p>

new Vue({
el: "#app",
data: () => ({
data_clicked_id: ""
}),
methods: {
part_clicked(val) {
this.data_clicked_id = val.target.getAttribute('id')
console.log(val.target.getAttribute('id'))
}
}
})
.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 path:hover {
fill: #a80000;
}
.human-body svg {
position: absolute;
left: 50%;
fill: #000;
}
#area #data {
color: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="human-body">
<svg #click="part_clicked" xmlns="http://www.w3.org/2000/svg"
width="259.22897"
height="350"
viewBox="0 0 68.587668 92.604164"
>
<path
style="opacity:1"
d="m 11.671635,6.3585449 -0.0482,-2.59085 4.20648,-2.46806 4.42769,2.95361 -0.0405,1.94408 0.24197,-3.34467 -2.03129,-2.31103004 -2.84508,-0.51629 -2.20423,0.52915 -1.9363,2.63077004 z"
id="head" />
<path
style="opacity:1"
d="m 19.748825,6.7034949 0.0203,-2.20747 -3.96689,-2.7637 -3.74099,2.23559 -0.006,2.63528 -0.60741,0.0403 0.27408,1.82447 0.97635,0.33932 0.44244,2.1802901 1.82222,2.06556 2.03518,-0.0607 1.79223,-1.94408 0.35957,-2.2406601 0.97616,-0.33932 0.25159,-1.78416 z"
id="face" />
<path
id="neck"
style="opacity:1"
d="m 13.304665,11.910505 1.64975,2.35202 0.74426,2.62159 -1.73486,-1.38354 -0.86649,-2.97104 z m 5.08047,0 -1.64975,2.35202 -0.74538,2.62234 1.73486,-1.38354 0.86649,-2.97104 z" />
<path
id="shoulder-left"
style="opacity:1"
d="m 19.047795,13.248365 3.55748,1.97916 0.72653,-0.35074 z m -0.107,0.43288 -0.37119,1.73073 2.1846,0.53561 1.40116,-0.49436 z m 3.98151,1.97595 0.75814,-0.41 2.40806,1.66799 1.17364,1.50707 0.62662,1.5626 -0.0464,3.70194 -1.3284,-1.72153 0.0407,-2.59376 -0.48842,-0.50049 c 0,0 -3.09778,-3.19058 -3.14371,-3.21401 z m -0.2409,0.10873 c -0.001,0.0525 3.32987,3.54733 3.32987,3.54733 l 0.10067,3.10396 -1.15426,-1.97782 -2.22547,-0.94804 -1.56576,-2.88481 z" />
<path
id="shoulder-right"
style="opacity:1"
d="m 12.624785,13.248365 -3.5574599,1.97916 -0.72653,-0.35074 z m 0.107,0.43288 0.37119,1.73073 -2.18459,0.53561 -1.4011499,-0.49436 z m -3.9814899,1.97595 -0.75814,-0.41 -2.40806,1.66799 -1.17364,1.50707 -0.62662,1.56259 0.0464,3.70195 1.3284,-1.72153 -0.0407,-2.59376 0.48843,-0.5005 c 0,0 3.09777,-3.19057 3.1437,-3.214 z m 0.2409,0.10873 c 0.002,0.0525 -3.32987,3.54733 -3.32987,3.54733 l -0.10067,3.10396 1.15426,-1.97782 2.22547,-0.94804 1.5657499,-2.88481 z" />
<path
id="arm-left"
style="opacity:1"
d="m 27.621665,30.814715 -0.33838,1.70499 -1.81932,-2.54418 -0.6629,-1.26895 z m -2.85271,-2.6096 c -0.0259,-0.0144 -0.0536,-0.0254 -0.0824,-0.0324 l -1.48333,-4.95503 1.00456,-2.08428 1.65511,1.74532 2.23034,6.67667 0.0415,0.93739 c -1.06528,-0.84215 -2.18962,-1.60679 -3.36434,-2.28803 z m 1.6945,-5.75654 1.64893,6.43421 -0.36469,-4.92266 z" />
<path
id="forearm-left"
style="opacity:1"
d="m 26.955425,32.969125 1.30083,10.28927 -1.10778,0.01 -1.89387,-7.99609 0.19174,-4.53719 z m 1.21978,-1.94971 -0.58729,2.58635 1.11876,9.15614 0.55849,-0.21663 0.2304,-6.77018 z" />
<path
id="arm-right"
style="opacity:1"
d="m 4.0746451,30.814715 0.33838,1.70499 1.81931,-2.54418 0.66289,-1.26895 z m 2.8527,-2.6096 c 0.0259,-0.0144 0.0536,-0.0254 0.0824,-0.0324 l 1.48332,-4.95503 -1.00455,-2.08428 -1.65509,1.74532 -2.23034,6.67667 -0.0415,0.93739 c 1.06528,-0.84215 2.18961,-1.60679 3.36433,-2.28803 z m -1.6945,-5.75654 -1.64891,6.43421 0.36468,-4.92266 z" />
<path
id="forearm-right"
style="opacity:1"
d="m 4.5752651,32.969125 -1.30083,10.28927 1.10778,0.01 1.89387,-7.99609 -0.19174,-4.53719 z m -1.21978,-1.94971 0.58728,2.58635 -1.11875,9.15614 -0.55849,-0.21663 -0.2304,-6.77018 z" />
<path
style="opacity:1"
d="m 20.337455,17.085495 1.72942,3.09103 1.89346,0.94785 -1.15295,0.90662 -0.90604,2.63773 -2.09968,0.86537 -3.34524,-1.655 0.83425,-6.50527 z"
id="chest-left" />
<path
style="opacity:1"
d="m 11.351215,17.085495 -1.7294199,3.09103 -1.89346,0.94785 1.15295,0.90662 0.90586,2.63773 2.0996699,0.86537 3.34636,-1.655 -0.83462,-6.50527 z"
id="chest-right" />
<path
style="opacity:1"
d="m 19.641935,34.707615 1.81341,-1.36479 0.15748,1.83347 1.28642,2.37338 -1.98044,2.73652 -1.03109,0.16554 -0.37026,-3.88816 z"
id="belly-left" />
<path
id="ribs-left"
style="opacity:1"
d="m 19.288925,26.151995 -3.11202,-1.40604 0.0937,2.27965 2.80119,1.43603 z m 1.93471,1.66849 -1.29355,0.7212 0.14997,-1.70898 z m -1.05303,-1.63718 2.47968,-1.03241 -0.9336,2.52093 z m 1.53164,1.73729 -1.69005,1.03372 -0.28871,2.0678 1.64975,-1.07533 z m -2.91143,1.10421 -0.0622,1.62387 -2.30308,-0.49961 -0.12448,-2.21722 z m -0.1556,2.4045 0.0311,1.99844 -2.20953,0.59391 -0.0311,-3.1227 z m 2.65459,-0.98535 -1.48383,1.03372 -0.20622,2.10905 1.64862,-1.32355 z" />
<path
style="opacity:1"
d="m 12.045985,34.707615 -1.81341,-1.36479 -0.15748,1.83347 -1.2856799,2.37432 1.9804499,2.73595 1.03109,0.16554 0.37119,-3.88721 z"
id="belly-right" />
<path
id="belly"
style="opacity:1"
d="m 15.636055,44.919735 -0.60647,-5.91209 -0.015,-3.84879 -2.18479,-1.07533 -0.24746,7.03017 z m 0.41581,-5.7e-4 0.60628,-5.91209 0.0154,-3.84915 2.18404,-1.07515 0.24746,7.03017 z" />
<path
id="ribs-right"
style="opacity:1"
d="m 12.399365,26.152365 3.11202,-1.40603 -0.0937,2.27965 -2.80138,1.4364 z m -1.93508,1.6685 1.29355,0.72139 -0.14997,-1.70899 z m 1.05303,-1.637 -2.4793099,-1.03259 0.93361,2.52148 z m -1.5316399,1.73729 1.6900499,1.03372 0.28871,2.06743 -1.64881,-1.07515 z m 2.9114199,1.10421 0.0623,1.62387 2.30327,-0.49961 0.12448,-2.21703 z m 0.15561,2.40432 -0.0309,1.99844 2.20973,0.59353 0.0311,-3.1227 z m -2.6546,-0.98516 1.48384,1.0339 0.20622,2.10905 -1.64975,-1.32355 z" />
<path
id="thigh-left"
style="opacity:1"
d="m 23.419015,50.399125 -0.15504,4.75091 -2.40263,6.60949 0.7362,1.90021 2.36401,-8.34435 z m -0.58154,-11.60825 -0.15485,4.00722 1.31793,7.93154 0.61977,-6.40308 z m -0.38731,5.12268 -2.75152,6.07258 -0.62015,4.87425 1.16232,6.85771 2.51886,-6.98144 0.15504,-7.18764 z" />
<path
id="innerthigh-left"
style="opacity:1"
d="m 22.063225,39.369605 v 4.21363 l -2.94574,5.82511 -1.86027,5.78349 0.19365,-4.0072 z m -3.24944,13.42596 -0.0649,0.15467 -1.21294,2.90207 0.78325,7.18803 1.23619,-0.66122 -1.0714,-6.69272 z" />
<path
style="opacity:1"
d="m 17.255895,87.868445 0.1243,3.45228 0.28983,1.20638 h 0.87136 l 0.24897,-0.83181 0.29058,-0.0416 -0.0624,0.83181 1.09914,-0.33332 0.29058,-0.16629 1.24444,-0.27033 0.0416,-0.97748 -1.20319,-2.03743 -0.82974,-1.0399 -2.03294,-0.83181 z"
id="feet-left" />
<path
id="calf-left"
style="opacity:1"
d="m 18.251375,70.441125 0.29058,0.91486 0.6224,3.8681 0.0829,5.15733 -0.87136,5.03304 0.0412,-6.44714 -0.91242,-2.57848 -0.12561,-2.82837 z m 1.9915,2.32915 -0.20753,7.73637 -1.65949,6.23904 1.80478,-0.853 3.00816,-10.83583 -1.03727,-6.82095 z" />
<path
id="knee-left"
style="opacity:1"
d="m 21.404635,64.784375 0.1243,1.12295 -0.87118,1.08171 -0.29058,1.70599 -0.58116,0.24933 -0.49774,-2.57866 -0.33182,-0.91486 0.29058,-0.58247 z m -3.85853,0.0832 0.6224,1.74685 1.3273,2.57867 -0.33182,2.37095 -0.95423,-2.66209 -0.78738,-1.49734 z m 4.97811,-2.37039 -0.95423,5.11609 0.62241,-0.33295 0.49773,1.66381 z" />
<path
id="thigh-right"
style="opacity:1"
d="m 8.2694651,50.399125 0.15504,4.75053 2.4026299,6.60968 -0.73638,1.90021 -2.3640099,-8.34435 z m 0.58117,-11.60768 0.15503,4.00684 -1.31754,7.93154 -0.61978,-6.40308 z m 0.38769,5.1223 2.7515099,6.07239 0.61997,4.87425 -1.16232,6.85771 -2.5190499,-6.98163 -0.15504,-7.18801 z" />
<path
id="genitalia"
style="opacity:1"
d="m 14.404465,45.040075 0.0221,-0.0277 -0.14866,-0.37945 -3.10172,-3.40449 -0.23283,-0.0825 2.05918,5.32009 z m -1.17263,2.01833 1.27705,3.29948 0.42631,-4.04862 -0.25196,-0.64303 z m 4.05219,-2.01795 -0.0221,-0.0281 0.14867,-0.37926 3.10171,-3.40449 0.23246,-0.0825 -2.05843,5.3199 z m 1.17263,2.01795 -1.27706,3.29948 -0.42631,-4.04843 0.25197,-0.64303 z" />
<path
id="innerthigh-right"
style="opacity:1"
d="m 9.6258251,39.369415 v 4.21363 l 2.9451699,5.8253 1.86028,5.78349 -0.19366,-4.0072 z m 3.2488699,13.42559 0.0647,0.15485 1.21294,2.90207 -0.78307,7.18803 -1.23618,-0.66102 1.0714,-6.69273 z" />
<path
style="opacity:1"
d="m 14.433335,87.868265 -0.12448,3.45228 -0.29058,1.20637 h -0.87118 l -0.24877,-0.83181 -0.29059,-0.0416 0.0623,0.83181 -1.09934,-0.33333 -0.29058,-0.16629 -1.2448,-0.27033 -0.0412,-0.97747 1.2031899,-2.03781 0.82975,-1.04009 2.03294,-0.83181 z"
id="right-feet" />
<path
id="calf-right"
style="opacity:1"
d="m 13.437675,70.440945 -0.29058,0.91486 -0.62241,3.86828 -0.0829,5.15733 0.87174,5.03304 -0.0418,-6.44714 0.91298,-2.57848 0.1243,-2.82837 z m -1.99151,2.32914 0.20735,7.73637 1.65968,6.23904 -1.80497,-0.85299 -3.0079799,-10.83584 1.03728,-6.82095 z" />
<path
id="knee-right"
style="opacity:1"
d="m 10.284405,64.784375 -0.12448,1.12295 0.87118,1.08171 0.29058,1.70599 0.58116,0.24933 0.49774,-2.57866 0.33182,-0.91486 -0.29058,-0.58247 z m 3.85854,0.0832 -0.62241,1.74685 -1.32767,2.57867 0.33182,2.37095 0.95423,-2.66209 0.78832,-1.4964 z m -4.9786799,-2.37058 0.9542299,5.11609 -0.6223999,-0.33313 -0.49793,1.6638 z" />
<path
style="opacity:1"
d="m 3.2054751,27.370125 0.005,3.09419 -0.57959,1.91184 -0.54539,-2.41185 z"
id="elbow-right" />
<path
style="opacity:1"
d="m 4.3904451,43.563145 -1.5198,0.0506 -0.76631,-0.67112 -1.21261996,2.15767 -0.86245,3.32873 0.49386,0.22113 0.59814996,-2.20238 0.50016,0.25356 -0.35639,2.49422 0.62382,0.24345 0.41402,-2.49194 0.55839,0.17851 -0.2262,2.76603 0.76938,0.32268 0.25788,-2.86764 0.4578,-0.0181 0.16611,2.65239 0.65997,0.2633 0.0712,-4.56643 0.34158,-0.19428 1.35316,1.68367 0.32832,-0.34354 -0.72644,-2.0551 z"
id="hand-right" />
<path
style="opacity:1"
d="m 28.325215,27.370125 -0.005,3.09419 0.57959,1.91184 0.54538,-2.41185 z"
id="elbow-left" />
<path
style="opacity:1"
d="m 27.140245,43.563145 1.5198,0.0506 0.76631,-0.67111 1.21262,2.15766 0.86245,3.32873 -0.49386,0.22113 -0.59815,-2.20238 -0.50016,0.25356 0.35639,2.49422 -0.62382,0.24345 -0.41402,-2.49194 -0.55839,0.17851 0.2262,2.76603 -0.76938,0.32268 -0.25788,-2.86764 -0.4578,-0.0181 -0.16611,2.6524 -0.65997,0.26329 -0.0712,-4.56643 -0.34158,-0.19428 -1.35316,1.68368 -0.32832,-0.34355 0.72644,-2.0551 z"
id="hands-left" />
<path
id="armback-left"
style="opacity:1"
d="m 43.185645,27.069445 0.4297,-1.4164 1.30458,-1.68577 -1.39393,-2.96155 -2.28367,0.92162 -1.83567,1.7467 -0.53524,1.78673 0.27068,4.30806 z m -2.46869,15.35539 -1.5182,0.0863 -0.78184,-0.65295 -1.16168,2.1855 -0.78414,3.34805 0.49892,0.20949 0.54632,-2.2158 0.50597,0.24175 -0.29779,2.5019 0.62936,0.22875 0.35546,-2.50096 0.56242,0.16536 -0.16126,2.77057 0.77674,0.30455 0.19056,-2.87291 0.45724,-0.0289 0.22827,2.64778 0.66597,0.24774 -0.0359,-4.56685 0.33693,-0.20224 1.39227,1.65147 0.32017,-0.35115 -0.77444,-2.03749 z m -0.97726,-0.17765 -1.43509,-0.746 -0.30622,-7.00985 c 0,0 0.64359,-2.77938 0.63694,-3.06274 l 0.6093,-1.21924 3.62552,-2.56583 -0.68276,1.9919 0.41561,4.74788 -1.80402,7.69727 z" />
<path
id="leg-left"
style="opacity:1"
d="m 51.176145,64.073985 -1.20605,3.01461 0.70738,0.26558 0.89754,3.51771 -0.55801,-4.01191 z m -5.08496,-3.15003 0.63355,1.8609 0.16813,2.03261 0.61314,1.93117 -0.90585,-0.0851 -0.28534,2.15982 z m 4.3014,6.58834 1.27664,4.99697 -0.28984,3.02284 -0.67869,10.06546 -1.66325,0.63506 -3.50399,-11.96959 1.24985,-7.17525 z m 0.54053,20.8287 0.85194,1.3581 0.37189,0.79238 -0.15588,1.21774 -0.76984,0.74446 -1.51185,0.12543 -1.1299,-0.29192 -0.24225,-0.95894 0.80765,-1.30405 -0.22562,-0.85987 0.29679,-0.84153 -0.0194,-1.81524 1.53568,-0.54817 z m -1.19598,0.4675 0.15943,1.25776 -0.6023,0.97431 m -0.54436,0.29544 1.06474,0.40084 1.55326,-0.65137 m -4.19331,-39.53466 4.55099,-2.03879 0.63802,0.23079 0.0353,1.80672 0.075,4.64669 -1.97837,6.04282 0.47612,1.41403 -1.42812,3.29446 -1.76611,-0.30111 -0.50079,-2.11605 -0.1695,-1.75674 -2.42102,-8.15763 -0.34279,-3.64687 z" />
<path
style="opacity:1"
d="m 44.742845,39.689035 5.48374,1.86457 2.27386,1.3378 2.74195,-1.74412 4.51804,-1.28077 0.90009,2.29721 0.675,3.4346 -0.81272,5.02838 -2.82636,0.16819 -4.11256,-1.67581 -1.00814,0.39118 -0.95849,-0.39888 -4.44053,1.94411 -2.77023,-0.51478 -0.95181,-6.15325 0.36754,-2.7864 z"
id="buttock" />
<path
style="opacity:1"
d="m 51.818445,37.309575 0.14418,2.97292 1.15984,-0.0241 0.048,-2.96488 2.80867,-0.81981 2.34029,-0.7541 1.34121,3.73319 -4.77886,1.36455 -2.33301,1.2158 -2.37536,-1.2333 -5.45663,-1.37716 1.51961,-3.95743 z"
id="loin" />
<path
style="opacity:1"
d="m 51.733705,14.788555 0.53876,25.33066 0.48967,-0.0297 0.65658,-25.3387 -0.28147,-0.84188 -1.25059,-4.9e-4 z"
id="column" />
<path
style="opacity:1"
d="m 48.157455,6.3585449 0.44208,-0.14964 0.16111,0.16427 1.48163,4.0475101 2.32401,1.45118 2.39971,-1.52387 0.97577,-3.6896901 0.52752,-0.55908 0.23367,0.0981 0.24198,-3.34467 -2.03129,-2.31103004 -2.84509,-0.51629 -2.20422,0.52915 -1.93631,2.63077004 z"
id="head-back" />
<path
style="opacity:1"
d="m 52.369695,12.105075 -2.35767,-1.55045 -1.47119,-3.9514301 -0.60741,0.0403 0.27409,1.82447 0.97635,0.33932 0.7613,2.2157201 0.33017,1.06849 0.0895,2.14894 1.16448,0.008 0.10563,-0.70833 0.54716,-0.0606 z m 1.01793,1.47595 0.23768,0.64982 1.38107,-0.004 0.01,-2.38784 0.25971,-0.79061 0.57215,-2.1698001 0.76359,-0.41018 0.25158,-1.78416 -0.62859,0.0193 -1.08488,3.8998101 -2.39725,1.46684 0.2768,1.48507 z"
id="nape" />
<path
id="armback-right"
style="opacity:1"
d="m 61.657445,27.250625 -0.32785,-1.05121 -1.27383,-2.05489 1.38708,-2.96476 2.28579,0.91634 1.83971,1.74245 0.53937,1.78549 -0.26073,4.30868 z m 2.64394,15.3417 1.51839,0.0828 0.78033,-0.65476 1.16673,2.18281 0.79187,3.34623 -0.49843,0.21064 -0.55144,-2.21453 -0.50541,0.24292 0.30356,2.5012 -0.62882,0.23021 -0.36124,-2.50014 -0.56203,0.16666 0.16765,2.77019 -0.77603,0.30634 -0.19719,-2.87245 -0.45732,-0.0278 -0.22215,2.64829 -0.66539,0.24928 0.0254,-4.56692 -0.3374,-0.20146 -1.38845,1.65469 -0.32098,-0.35041 0.76973,-2.03928 z m 0.97685,-0.1799 1.43335,-0.74932 0.29002,-7.01054 c 0,0 -0.65,-2.77789 -0.64401,-3.06126 l -0.61212,-1.21783 -3.98124,-2.57566 1.0222,1.93525 -0.38967,4.82212 1.8218,7.69308 z" />
<path
id="leg-right"
style="opacity:1"
d="m 54.019305,64.073985 1.20605,3.01461 -0.70737,0.26558 -0.89755,3.51771 0.55802,-4.01191 z m 5.08496,-3.15003 -0.63355,1.8609 -0.16813,2.03261 -0.61313,1.93117 0.90584,-0.0851 0.28534,2.15982 z m -4.3014,6.58834 -1.27664,4.99697 0.28984,3.02284 0.67869,10.06546 1.66325,0.63506 3.504,-11.96959 -1.24986,-7.17525 z m -0.54053,20.8287 -0.85194,1.3581 -0.37189,0.79238 0.15589,1.21774 0.76983,0.74446 1.51186,0.12543 1.12989,-0.29192 0.24225,-0.95894 -0.80765,-1.30405 0.22563,-0.85987 -0.29679,-0.84153 0.0194,-1.81524 -1.53568,-0.54817 z m 1.19598,0.4675 -0.15943,1.25776 0.6023,0.97431 m 0.54436,0.29544 -1.06474,0.40084 -1.55326,-0.65137 m 3.56525,-39.90247 -3.97962,-1.70224 -0.56389,0.27131 -0.0528,1.79746 -0.075,4.64669 1.97837,6.04282 -0.47612,1.41403 1.42813,3.29446 1.7661,-0.30111 0.50079,-2.11605 0.1695,-1.75674 2.42102,-8.15763 0.009,-3.68308 z" />
<path
style="opacity:1"
d="m 62.863315,16.685695 1.57473,1.56518 0.81404,2.06904 0.0384,2.52859 -1.48921,-1.23926 -2.76223,-1.15539 -1.84691,3.4342 -1.13679,5.49715 -0.0767,5.8593 -4.07066,1.10938 0.10355,-7.94098 1.94107,-4.90021 5.04395,-8.19335 z"
id="back-right" />
<path
style="opacity:1"
d="m 55.439085,14.728535 -0.063,-2.62463 0.71441,1.15181 4.37994,1.49796 -4.97857,8.36746 -1.83043,5.08189 0.21949,-13.55362 z"
id="clavicule-right" />
<path
style="opacity:1"
d="m 42.200945,16.586495 -1.57473,1.56517 -0.81404,2.06905 -0.38603,2.52859 1.83679,-1.23927 2.76223,-1.15538 1.84691,3.4342 1.13679,5.49715 0.0767,5.8593 4.07066,1.10938 -0.10355,-7.94098 -1.94107,-4.90022 -5.04395,-8.19334 z"
id="back-left" />
<path
style="opacity:1"
d="m 49.625175,14.629325 0.063,-2.62462 -0.71441,1.15181 -4.37994,1.49796 4.97857,8.36746 1.83043,5.08188 -0.21949,-13.55362 z"
id="clavicule-left" />
</svg>
<span style="position:fixed; top:50px; left:50px">{{data_clicked_id}}</span>
</div>
</div>
You could use a framework lie vue to handle this. I took the liberty to copy your code to make and example. I edited a little the svgs definition to make it work. I think the problem you could be having was with the filling of the path. fill-opacity:1 did the trick.(by the way, this is my first contribution to stackoverflow!)

Animating SVG gradient border

I'm trying to make a loading animation with an irregular shape. The top shape is the vector object and the bottom is a single frame of the animation. I would like the gradient to animation in an infinite looping circle. Is this possible?
Here is the SVG code for the shape
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>

Here you go!
path {
stroke-dasharray: 30 139;
stroke-dashoffset: 0;
animation: spin 1s linear infinite;
stroke-width: 3;
}
#keyframes spin {
0% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: -169;
}
}
<!-- Simple stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="#000" stroke-width="2" fill="none"/>
</svg>
<!-- Simple gradient stroke -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- Simple gradient. Notice to x1, x2, y1, y2.
These values decide the direction of gradient. Gradient go from (x1,y1) to (x2,y2) -->
<linearGradient id="Gradient1" x1="0" x2="1" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient1)" stroke-width="2" fill="none"/>
</svg>
<!-- Gradient stroke that animate along with the animation. -->
<svg width="64" height="44" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="Gradient2" x1="0" x2="1" y1="0" y2="1">
<!-- Change the value of x1,x2,y1,y2 during animation to change the direction of gradient.
Expected result: (x1,y1): (0,0) -> (1,0) -> (1,1) -> (0,1) -> (0,0)
(x2,y2): (1,1) -> (0,1) -> (0,0) -> (0,1) -> (1,1) -->
<animate attributeType="XML" attributeName="x1"
values="0; 1; 1; 0; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y1"
values="0; 0; 1; 1; 0"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="x2"
values="1; 0; 0; 1; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<animate attributeType="XML" attributeName="y2"
values="1; 1; 0; 0; 1"
keyTimes="0; 0.25; 0.5; 0.75; 1"
dur="1s" repeatCount="indefinite"/>
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<path d="M31.725 1C42.327 1 49.85 2.505 54.727 5.6c5.268 3.346 7.722 8.708 7.722 16.876 0 7.243-3.194 12.373-9.765 15.684-3.66 1.844-10.269 4.042-20.96 4.042-10.712 0-17.32-2.198-20.976-4.041C4.188 34.852 1 29.722 1 22.475c0-8.16 2.462-13.523 7.747-16.873C13.633 2.506 21.15 1 31.725 1" stroke="url(#Gradient2)" stroke-width="2" fill="none"/>
</svg>
Explanation: The key of that animation is playing with stroke-dasharray and stroke-dashoffset.
stroke-dasharray: 30 139;. 30 is the length of the path that shows and moves to make animation. You can change it to whatever you want. 169 is total length of your path so 139 is the result of 169 - 30.
Then you animate stroke-dashoffset from 0 to -169 and your animation is all setted

Animate SVG path for different screen sizes

I am new to SVG. I am trying to animate a straight line to curved line. I have followed a few links but could not find an appropriate way to do that. Following is my code:
<svg width="100%" height="960px">
<path id="shape" d="M0 0 C0 0, 0 00, 400 0" stroke="black" fill="transparent" stroke-width="1" vector-effect="non-scaling-stroke">
<animate
attributeName="d"
dur="500ms"
begin="indefinite"
repeatCount="1"
to = "M0 0 C0 0, 165 50, 400 0"
id="test" />
</path>
</svg>
I also have used:
values="M0 0 C0 0, 0 00, 400 0; M M0 0 C0 0, 165 50, 400 0;"
in animate tag, but still it didn't work.
What is problem: I am not able to make path curved, animation happens once and then path becomes straight again and I am not sure how to make the same curve on different screen sizes.

If you use begin="indefinite" the animation won't start, except via javascript. In order to demonstrate things I've set begin="1s"
If you want the animation to stay in the end position then add fill="freeze" to it.
If you want it to work with different screen sizes, use a viewBox.
<svg width="100%" height="960px" viewBox="0 0 500 500" preserveAspectRatio="none">
<path id="shape" d="M0 0 C0 0, 0 00, 400 0" stroke="black" fill="transparent" stroke-width="1" vector-effect="non-scaling-stroke">
<animate
attributeName="d"
dur="500ms"
begin="1s"
repeatCount="1"
fill="freeze"
to = "M0 0 C0 0, 165 50, 400 0"
id="test" />
</path>
</svg>

Resources