I added an SVG image to the background of my page with CSS however I am trying to change the opacity with no luck. I tried adding an image tag but I would prefer adding the image via the background-image property. Is it even possible to change the opacity?
The goal is to have a Bootstrap carousel with the Harley Davidson logo (in opacity) behind it.
Please see my CSS code below.
Thank you in advance for your help.
#page2 {
background-image: url(h-d-logo-shield.svg);
background-repeat: no-repeat;
background-size: 900px;
background-position: center;
position: absolute;
display: flex;
background-color: #fff;
height: 100vh;
width: 100%;
}
.carousel {
width: 800px;
height: 500px;
margin: auto;
}
Yes Possible. You need to add background of it's before element.
like this.
#page2 {
position: relative;
display: flex;
background-color: #fff;
height: 100vh;
width: 100%;
}
#page2::before {
content: "";
background-image: url(h-d-logo-shield.svg);
background-repeat: no-repeat;
background-size: 900px;
background-position: center;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
opacity: 0.75;
}
You can also set .svg-bg:opacity:0.5 in your css, or, open the svg directly on a text editor and change the opacity in the svg code, just like this:
<div style="width:100px;">
<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" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:1;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:0.7;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<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" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:1;fill:#007aff;fill-opacity:0.7;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<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:svgfill-="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" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:0.5;fill:#007aff;fill-opacity:1;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<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" x="0" y="0" viewBox="0 0 580 580">
<path style="opacity:1;fill:#007aff;fill-opacity:0.3;stroke:#000;stroke-width:12px;stroke-opacity:1;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
<div style="width:100px;">
<svg style="opacity:0.5" 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" x="0" y="0" viewBox="0 0 580 580">
<path style="fill:#007aff;stroke:#000;stroke-width:12px;fill-rule:nonzero;" d="m 554.20639,173.62102 0,297.19406 q 0,20.50948 -14.70491,35.2144 -14.31794,14.31795 -34.82743,14.31795 l -429.151312,0 q -20.509489,0 -35.214405,-14.31795 -14.317938,-14.70492 -14.317938,-35.2144 l 0,-297.19406 q 0,-20.50948 14.317938,-34.82743 14.704916,-14.70491 35.214405,-14.70491 l 90.938282,0 12.38309,-33.666516 q 5.4176,-14.704914 18.18765,-23.218286 12.77006,-8.900343 28.24892,-8.900343 l 129.63543,0 q 15.47886,0 28.24891,8.900343 12.77006,8.513372 18.18766,23.218286 l 12.77006,33.666516 90.55131,0 q 20.50949,0 34.82743,14.70491 14.70491,14.31795 14.70491,34.82743 l 0,0 z M 414.12274,322.21805 q 0,-25.54012 -10.06126,-47.98446 -9.67429,-22.44434 -26.70103,-39.08411 -16.63977,-17.02674 -39.08411,-26.70103 -22.44435,-10.06125 -47.98446,-10.06125 -25.92708,0 -48.37143,10.06125 -22.44434,9.67429 -39.47108,26.70103 -16.63978,16.63977 -26.31406,39.08411 -9.67429,22.44434 -9.67429,47.98446 0,25.92709 9.67429,48.37143 9.67428,22.44435 26.31406,39.47109 17.02674,16.63976 39.47108,26.31406 22.44435,9.67428 48.37143,9.67428 25.54011,0 47.98446,-9.67428 22.44434,-9.6743 39.08411,-26.31406 17.02674,-17.02674 26.70103,-39.47109 10.06126,-22.44434 10.06126,-48.37143 z m -33.27955,0 q 0,18.9616 -6.96548,35.60137 -7.35246,16.2528 -19.73554,28.63588 -11.99612,12.38309 -28.63589,19.73555 -16.63977,6.96549 -35.2144,6.96549 -18.9616,0 -35.60137,-6.96549 -16.2528,-7.35246 -28.63589,-19.73555 -12.38309,-12.38308 -19.73554,-28.63588 -6.96548,-16.63977 -6.96548,-35.60137 0,-18.57463 6.96548,-35.2144 7.35245,-16.63977 19.73554,-28.63589 12.38309,-12.38308 28.63589,-19.73554 16.63977,-6.96549 35.60137,-6.96549 18.57463,0 35.2144,6.96549 16.63977,7.35246 28.63589,19.73554 12.38308,11.99612 19.73554,28.63589 6.96548,16.63977 6.96548,35.2144 z"/>
</svg>
</div>
Notice that there is opacity, which works exactly as the css opacity. It takes values from 0 (transparent) to 1 (full opacity) and it applies to the whole path, or any other element.
There are also fill-opacity and stroke-opacity which applies to change separately the opacity of fill or stroke.
Also notice that in the last svg I removed all opacity modifiers from the path element and add a style="opacity:0.5" to affect the whole svg.
You can also affect svg opacity from the css file by setting there fill-opacity, stroke-opacity and opacity but to do that you should remove any inline modifier within the svg because the inline modifiers take preference just like the inline css does.
Something that will perfectly work inside the svg code or through css is this approach using rgba just like in css. Use it like this fill:rgba(255, 255, 255, 1) which make it possible write a shorter code as you don't have to use fill-opacity, the same to stroke:rgba(0, 0, 0, 1) which substitute the stroke-opacity. This works fine for must modern browsers.
Related
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>
I am trying to get the following image to look nice.
The issue is specifically right here:
Basically I'd like to hide the vertical strokes wherever they overlap with another part of the <path/>
I've made a simplified snippet below for people to play with.
path {
transform: translate(50px, 50px);
stroke-width: 1;
stroke: black;
opacity: .5;
box-sizing: inherit;
stroke-linecap: round;
stroke-linejoin: miter;
}
<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="green" d="
M 0,0
L -5,0
L -5,-5
L -22,-5
L -22,-20
L 22,-20
L 22,-5
L 5,-5
L 5,0
L 50,0
L 50,-25
L -22,-25
L -22,-40
L 132,-40
L 132,-25
L 60,-25
L 60,0
L 94,0
L 94,-5
L 33,-5
L 33,-20
L 165,-20
L 165,-5
L 104,-5
L 104,0
L 152.5,0
Q 155.5,8 152.5,16
L 0,16
z"></path>
</svg>
Thanks!
You can fake it with stroke-dasharray. If these figures are auto-generated, it will take a little math to calculate where the gaps need to go, but if everything is made with straight lines that shouldn't be too difficult.
<svg height="150px" width="400px" viewBox="-50-50 250 100">
<path stroke-width="1" stroke="black" fill="green"
d="M 0,0
L -5,0
L -5,-5
L -22,-5
L -22,-20
L 22,-20
L 22,-5
L 5,-5
L 5,0
L 50,0
L 50,-25
L -22,-25
L -22,-40
L 132,-40
L 132,-25
L 60,-25
L 60,0
L 94,0
L 94,-5
L 33,-5
L 33,-20
L 165,-20
L 165,-5
L 104,-5
L 104,0
L 152.5,0
Q 155.5,8 152.5,16
L 0,16
z"
stroke-dasharray="172 16 338 16 9999" />
</svg>
Alternatively, you can split the shape into more than one path. And give them a non-transparent fill.
path {
transform: translate(50px, 50px);
stroke-width: 1;
stroke: black;
box-sizing: inherit;
stroke-linecap: round;
stroke-linejoin: miter;
}
<svg height="400px" width="400px">
<path stroke-width="1" stroke="black" fill="#80c080" d="
M 0,0
L -5,0
L -5,-5
L -22,-5
L -22,-20
L 22,-20
L 22,-5
L 5,-5
L 5,0
L 50,0
L 50,-25
L -22,-25
L -22,-40
L 132,-40
L 132,-25
L 60,-25
L 60,0
L 152.5,0
Q 155.5,8 152.5,16
L 0,16
z
"/>
<path stroke-width="1" stroke="black" fill="#80c080" d="
M 94,0.5
L 94,-5
L 33,-5
L 33,-20
L 165,-20
L 165,-5
L 104,-5
L 104,0.5
"/>
</svg>
I have this SVG image:
and I want to stretch (or fit) inside a QML Image.
I wrote this code:
import QtQuick 2.0
Rectangle {
width: 250
height: 250
color: "yellow" // just to see the actual area
Image {
id: image
x: 0
y: 0
width: 250
height: 250
source: "file:///home/mark/headphones.svg"
sourceSize: Qt.size(width, height)
fillMode: Image.Stretch
}
}
Here the result:
Using fillMode: Image.Stretch or fillMode: Image.PreserveAspectFit I expect the image would actually fit the constraint of the desired size.
What am I missing here?
I'm run Qt 6.2.0 on Ubuntu Desktop 20.04.
UPDATE
Here the source code of the SVG file:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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"
id="svg11"
height="100%"
width="100%"
version="1.0">
<metadata
id="metadata15">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3">
<pattern
y="0"
x="0"
height="6"
width="6"
patternUnits="userSpaceOnUse"
id="WMFhbasepattern" />
</defs>
<path
id="path5"
d=" M 25.074798,99.853263 L 25.097666,99.07575 L 25.131968,98.309671 L 25.200572,97.555026 L 25.292044,96.788947 L 25.417818,96.034302 L 25.56646,95.279657 L 25.749404,94.525012 L 25.943783,93.793235 L 26.172463,93.061458 L 26.435445,92.329681 L 26.709862,91.620772 L 27.01858,90.911863 L 27.350167,90.225822 L 27.704621,89.539781 L 28.081944,88.876608 L 28.482134,88.213435 L 28.905193,87.584564 L 29.362554,86.955693 L 29.831348,86.34969 L 30.323011,85.755121 L 30.837542,85.183421 L 31.363506,84.623154 L 31.923773,84.085755 L 32.495474,83.571224 L 33.090043,83.079562 L 33.696046,82.599333 L 34.324917,82.153406 L 34.965222,81.718914 L 35.61696,81.318723 L 36.291567,80.929967 L 36.966174,80.575512 L 37.663649,80.243926 L 38.372558,79.935207 L 39.092901,79.649357 L 39.824678,79.397808 L 40.556455,79.157694 L 41.299667,78.963316 L 42.054312,78.780372 L 42.808957,78.631729 L 43.563602,78.505955 L 44.329681,78.403049 L 45.107194,78.334445 L 45.873273,78.300143 L 46.639352,78.288709 L 47.416865,78.300143 L 48.182944,78.334445 L 48.937589,78.403049 L 49.703668,78.505955 L 50.458313,78.620295 L 51.212959,78.780372 L 51.967604,78.951882 L 52.699381,79.157694 L 53.431158,79.386374 L 54.162935,79.637923 L 54.871844,79.912339 L 55.580753,80.221058 L 56.266794,80.552644 L 56.952835,80.907099 L 57.627442,81.284421 L 58.279181,81.684612 L 58.919485,82.119104 L 59.536922,82.565031 L 60.142925,83.033826 L 60.737494,83.525488 L 61.309195,84.040019 L 61.869462,84.577418 L 62.40686,85.126251 L 62.921391,85.697951 L 63.413054,86.29252 L 63.893283,86.898523 L 64.339209,87.527394 L 64.773702,88.167699 L 65.173892,88.819438 L 65.562649,89.494045 L 65.917103,90.180086 L 66.24869,90.866127 L 66.557408,91.575036 L 66.843259,92.295379 L 67.106241,93.027156 L 67.334921,93.758933 L 67.540734,94.502144 L 67.712244,95.256789 L 67.860886,96.011434 L 67.98666,96.777513 L 68.089566,97.543592 L 68.158171,98.309671 L 68.192473,99.07575 L 68.203907,99.853263 L 68.203907,135.55026 L 68.192473,136.31634 L 68.158171,137.08242 L 68.089566,137.8485 L 67.98666,138.60314 L 67.87232,139.36922 L 67.723678,140.12387 L 67.540734,140.86708 L 67.334921,141.61029 L 67.106241,142.34207 L 66.854693,143.06241 L 66.580276,143.77132 L 66.271558,144.48023 L 65.939971,145.1777 L 65.585517,145.85231 L 65.208194,146.52692 L 64.808004,147.17866 L 64.373511,147.81896 L 63.927585,148.4364 L 63.45879,149.0424 L 62.967127,149.63697 L 62.452596,150.20867 L 61.915198,150.76894 L 61.366365,151.30634 L 60.794664,151.82087 L 60.200095,152.31253 L 59.594092,152.79276 L 58.965222,153.23869 L 58.324917,153.67318 L 57.673178,154.07337 L 56.998571,154.46212 L 56.31253,154.81658 L 55.626489,155.14817 L 54.91758,155.45688 L 54.197237,155.74273 L 53.46546,156.00572 L 52.733683,156.2344 L 51.990472,156.44021 L 51.235827,156.61172 L 50.481182,156.7718 L 49.715102,156.88614 L 48.960457,156.98904 L 48.182944,157.05765 L 47.416865,157.09195 L 46.639352,157.11482 L 45.873273,157.09195 L 45.107194,157.05765 L 44.341115,156.98904 L 43.58647,156.88614 L 42.820391,156.7718 L 42.07718,156.62315 L 41.322535,156.44021 L 40.579323,156.24583 L 39.847546,156.01715 L 39.127203,155.75417 L 38.418294,155.47975 L 37.709385,155.17103 L 37.01191,154.83945 L 36.337303,154.48499 L 35.662697,154.10767 L 35.010958,153.70748 L 34.370653,153.28442 L 33.753216,152.82706 L 33.147213,152.35827 L 32.552644,151.8666 L 31.980943,151.35207 L 31.420677,150.82611 L 30.883278,150.26584 L 30.368747,149.69414 L 29.877084,149.09957 L 29.396856,148.49357 L 28.950929,147.8647 L 28.516436,147.22439 L 28.116246,146.57265 L 27.727489,145.89805 L 27.373035,145.22344 L 27.041448,144.52596 L 26.73273,143.81706 L 26.446879,143.09671 L 26.183897,142.36494 L 25.955217,141.63316 L 25.749404,140.88995 L 25.577894,140.1353 L 25.417818,139.38066 L 25.303478,138.62601 L 25.200572,137.85993 L 25.131968,137.08242 L 25.097666,136.31634 L 25.074798,135.55026 L 25.074798,99.853263 z "
style="fill:#000000;fill-rule:evenodd;fill-opacity:1;stroke:none;" />
<path
id="path7"
d=" M 114.72892,99.853263 L 114.75179,99.07575 L 114.78609,98.309671 L 114.85469,97.555026 L 114.9576,96.788947 L 115.07194,96.034302 L 115.22058,95.279657 L 115.40353,94.525012 L 115.5979,93.793235 L 115.82658,93.061458 L 116.08957,92.329681 L 116.36398,91.620772 L 116.6727,90.911863 L 117.00429,90.225822 L 117.35874,89.539781 L 117.73606,88.876608 L 118.13626,88.213435 L 118.57075,87.584564 L 119.01667,86.955693 L 119.48547,86.34969 L 119.97713,85.755121 L 120.49166,85.183421 L 121.02906,84.623154 L 121.57789,84.085755 L 122.1496,83.571224 L 122.74416,83.079562 L 123.35017,82.599333 L 123.97904,82.153406 L 124.61934,81.718914 L 125.27108,81.318723 L 125.94569,80.929967 L 126.63173,80.575512 L 127.31777,80.243926 L 128.02668,79.935207 L 128.74702,79.649357 L 129.4788,79.397808 L 130.21058,79.157694 L 130.95379,78.963316 L 131.70843,78.780372 L 132.46308,78.631729 L 133.21772,78.505955 L 133.9838,78.403049 L 134.76131,78.334445 L 135.52739,78.300143 L 136.30491,78.288709 L 137.07099,78.300143 L 137.83707,78.334445 L 138.60314,78.403049 L 139.35779,78.505955 L 140.12387,78.620295 L 140.86708,78.780372 L 141.62172,78.951882 L 142.36494,79.157694 L 143.09671,79.386374 L 143.81706,79.637923 L 144.52596,79.912339 L 145.23487,80.221058 L 145.93235,80.552644 L 146.60696,80.907099 L 147.28156,81.284421 L 147.9333,81.684612 L 148.57361,82.119104 L 149.19104,82.565031 L 149.79705,83.033826 L 150.39162,83.525488 L 150.96332,84.040019 L 151.52358,84.577418 L 152.06098,85.126251 L 152.57551,85.697951 L 153.06717,86.29252 L 153.5474,86.898523 L 153.99333,87.527394 L 154.42782,88.167699 L 154.82801,88.819438 L 155.21677,89.494045 L 155.57122,90.180086 L 155.90281,90.866127 L 156.21153,91.575036 L 156.49738,92.295379 L 156.76036,93.027156 L 156.98904,93.758933 L 157.19485,94.502144 L 157.36636,95.256789 L 157.51501,96.011434 L 157.64078,96.777513 L 157.74369,97.543592 L 157.81229,98.309671 L 157.84659,99.07575 L 157.86946,99.853263 L 157.86946,135.55026 L 157.84659,136.31634 L 157.81229,137.08242 L 157.74369,137.8485 L 157.64078,138.60314 L 157.52644,139.36922 L 157.3778,140.12387 L 157.19485,140.86708 L 157.00048,141.61029 L 156.7718,142.34207 L 156.50881,143.06241 L 156.2344,143.77132 L 155.92568,144.48023 L 155.59409,145.1777 L 155.23964,145.85231 L 154.86232,146.52692 L 154.46212,147.17866 L 154.03907,147.81896 L 153.58171,148.4364 L 153.11291,149.0424 L 152.62125,149.63697 L 152.10672,150.20867 L 151.56932,150.76894 L 151.02049,151.30634 L 150.44879,151.82087 L 149.85422,152.31253 L 149.24821,152.79276 L 148.61934,153.23869 L 147.97904,153.67318 L 147.3273,154.07337 L 146.65269,154.46212 L 145.96665,154.81658 L 145.28061,155.14817 L 144.5717,155.45688 L 143.85136,155.74273 L 143.11958,156.00572 L 142.3878,156.2344 L 141.64459,156.44021 L 140.88995,156.61172 L 140.1353,156.7718 L 139.38066,156.88614 L 138.61458,156.98904 L 137.83707,157.05765 L 137.07099,157.09195 L 136.30491,157.11482 L 135.52739,157.09195 L 134.76131,157.05765 L 133.99524,156.98904 L 133.24059,156.88614 L 132.48595,156.7718 L 131.7313,156.62315 L 130.97666,156.44021 L 130.23344,156.24583 L 129.50167,156.01715 L 128.78132,155.75417 L 128.07242,155.47975 L 127.36351,155.17103 L 126.66603,154.83945 L 125.99142,154.48499 L 125.31682,154.10767 L 124.66508,153.70748 L 124.02477,153.28442 L 123.40734,152.82706 L 122.80133,152.35827 L 122.20677,151.8666 L 121.63506,151.35207 L 121.0748,150.82611 L 120.5374,150.26584 L 120.02287,149.69414 L 119.53121,149.09957 L 119.05098,148.49357 L 118.60505,147.8647 L 118.17056,147.22439 L 117.77037,146.57265 L 117.38161,145.89805 L 117.02716,145.22344 L 116.69557,144.52596 L 116.38685,143.81706 L 116.101,143.09671 L 115.83802,142.36494 L 115.60934,141.63316 L 115.40353,140.88995 L 115.23202,140.1353 L 115.08337,139.38066 L 114.9576,138.62601 L 114.85469,137.85993 L 114.78609,137.08242 L 114.75179,136.31634 L 114.72892,135.55026 L 114.72892,99.853263 z "
style="fill:#000000;fill-rule:evenodd;fill-opacity:1;stroke:none;" />
<path
id="path9"
d=" M 13.332063,126.6546 L 13.332063,83.55979 L 13.686517,76.264888 L 14.887089,69.427346 L 16.888042,62.818485 L 19.666508,56.449738 L 23.165317,50.355407 L 27.327299,44.592663 L 32.152454,39.150071 L 37.503573,34.16484 L 43.41496,29.568366 L 49.760838,25.486422 L 56.518342,21.919009 L 63.607432,18.934731 L 70.993807,16.533587 L 78.563125,14.795617 L 86.315388,13.720819 L 94.113387,13.354931 L 100.505,13.732253 L 106.99952,14.864221 L 113.59695,16.716532 L 120.19438,19.254883 L 126.70033,22.422106 L 133.02334,26.161029 L 139.10624,30.448785 L 144.84612,35.205336 L 150.17437,40.396379 L 154.97666,45.907575 L 159.23011,51.750357 L 162.83182,57.810386 L 165.7132,64.019057 L 167.83992,70.330634 L 169.1434,76.699381 L 169.6122,83.319676 L 169.6122,126.6546 L 182.94426,126.6546 L 182.94426,82.850881 L 182.38399,74.892806 L 180.73749,66.866127 L 178.1191,59.068128 L 174.63173,51.567413 L 170.36684,44.398285 L 165.42735,37.606479 L 159.85898,31.214864 L 153.77608,25.292044 L 147.22439,19.860886 L 140.28394,14.967127 L 133.01191,10.656503 L 125.49976,7.0090519 L 117.79323,4.0476417 L 109.9495,1.8523106 L 102.04859,0.46879466 L 94.204859,0 L 85.091949,0.4230586 L 76.161982,1.6579323 L 67.426394,3.6817532 L 58.953788,6.4259171 L 50.801334,9.867556 L 43.037637,13.960934 L 35.696999,18.683182 L 28.870891,23.977132 L 22.559314,29.86565 L 16.922344,36.234397 L 11.948547,43.117675 L 7.740829,50.446879 L 4.3563602,58.199142 L 1.8866127,66.340162 L 0.41162458,74.7899 L 0,83.251072 L 0,126.6546 L 13.332063,126.6546 z "
style="fill:#000000;fill-rule:nonzero;fill-opacity:1;stroke:none;" />
</svg>
your SVG File has a problem :
I update something in your code too :
Rectangle {
width: 250
height: 250
color: "yellow" // just to see the actual area
Image {
id:img
anchors.fill: parent
source: "img.svg"
sourceSize: Qt.size(width, height)
fillMode: Image.Stretch
}
}
SVG :
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
id="svg11"
height="166"
width="200"
version="1.0"
sodipodi:docname="img.svg"
inkscape:version="1.1 (ce6663b3b7, 2021-05-25)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/">
<sodipodi:namedview
id="namedview9"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:pageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
showgrid="false"
inkscape:zoom="1.2280088"
inkscape:cx="144.13578"
inkscape:cy="67.996257"
inkscape:window-width="1366"
inkscape:window-height="670"
inkscape:window-x="0"
inkscape:window-y="27"
inkscape:window-maximized="1"
inkscape:current-layer="svg11" />
<metadata
id="metadata15">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
</cc:Work>
</rdf:RDF>
</metadata>
<defs
id="defs3">
<pattern
y="0"
x="0"
height="6"
width="6"
patternUnits="userSpaceOnUse"
id="WMFhbasepattern" />
</defs>
<path
id="path5"
d="m 34.080029,104.54594 0.02287,-0.77751 0.0343,-0.76608 0.0686,-0.75465 0.09147,-0.76607 0.125774,-0.75465 0.148642,-0.754644 0.182944,-0.754645 0.194379,-0.731777 0.22868,-0.731777 0.262982,-0.731777 0.274417,-0.708909 0.308718,-0.708909 0.331587,-0.686041 0.354454,-0.686041 0.377323,-0.663173 0.40019,-0.663173 0.423059,-0.628871 0.457361,-0.628871 0.468794,-0.606003 0.491663,-0.594569 0.514531,-0.5717 0.525964,-0.560267 0.560267,-0.537399 0.571701,-0.514531 0.594569,-0.491662 0.606003,-0.480229 0.628871,-0.445927 0.640305,-0.434492 0.651738,-0.400191 0.674607,-0.388756 0.674607,-0.354455 0.697475,-0.331586 0.708909,-0.308719 0.720343,-0.28585 0.731777,-0.251549 0.731777,-0.240114 0.743212,-0.194378 0.754645,-0.182944 0.754645,-0.148643 0.754645,-0.125774 0.766079,-0.102906 0.777513,-0.0686 0.766079,-0.0343 0.766079,-0.01143 0.777513,0.01143 0.766079,0.0343 0.754645,0.0686 0.766079,0.102906 0.754645,0.11434 0.754646,0.160077 0.754645,0.17151 0.731777,0.205812 0.731777,0.22868 0.731777,0.251549 0.708909,0.274416 0.708909,0.308719 0.686041,0.331586 0.686041,0.354455 0.674607,0.377322 0.651739,0.400191 0.640304,0.434492 0.617437,0.445927 0.606003,0.468795 0.594569,0.491662 0.571701,0.514531 0.560267,0.537399 0.537398,0.548833 0.514531,0.5717 0.491663,0.594569 0.480229,0.606003 0.445926,0.628871 0.434493,0.640305 0.40019,0.651739 0.388757,0.674607 0.354454,0.686041 0.331587,0.686041 0.308718,0.708909 0.285851,0.720343 0.262982,0.731777 0.22868,0.731777 0.205813,0.743211 0.17151,0.754645 0.148642,0.754642 0.125774,0.76608 0.102906,0.76608 0.0686,0.76608 0.0343,0.76608 0.01143,0.77751 v 35.697 l -0.01143,0.76608 -0.0343,0.76608 -0.0686,0.76608 -0.102906,0.75464 -0.11434,0.76608 -0.148642,0.75465 -0.182944,0.74321 -0.205813,0.74321 -0.22868,0.73178 -0.251548,0.72034 -0.274417,0.70891 -0.308718,0.70891 -0.331587,0.69747 -0.354454,0.67461 -0.377323,0.67461 -0.40019,0.65174 -0.434493,0.6403 -0.445926,0.61744 -0.468795,0.606 -0.491663,0.59457 -0.514531,0.5717 -0.537398,0.56027 -0.548833,0.5374 -0.571701,0.51453 -0.594569,0.49166 -0.606003,0.48023 -0.62887,0.44593 -0.640305,0.43449 -0.651739,0.40019 -0.674607,0.38875 -0.686041,0.35446 -0.686041,0.33159 -0.708909,0.30871 -0.720343,0.28585 -0.731777,0.26299 -0.731777,0.22868 -0.743211,0.20581 -0.754645,0.17151 -0.754645,0.16008 -0.76608,0.11434 -0.754645,0.1029 -0.777513,0.0686 -0.766079,0.0343 -0.777513,0.0229 -0.766079,-0.0229 -0.766079,-0.0343 -0.766079,-0.0686 -0.754645,-0.1029 -0.766079,-0.11434 -0.743211,-0.14865 -0.754645,-0.18294 -0.743212,-0.19438 -0.731777,-0.22868 -0.720343,-0.26298 -0.708909,-0.27442 -0.708909,-0.30872 -0.697475,-0.33158 -0.674607,-0.35446 -0.674606,-0.37732 -0.651739,-0.40019 -0.640305,-0.42306 -0.617437,-0.45736 -0.606003,-0.46879 -0.594569,-0.49167 -0.571701,-0.51453 -0.560266,-0.52596 -0.537399,-0.56027 -0.514531,-0.5717 -0.491663,-0.59457 -0.480228,-0.606 -0.445927,-0.62887 -0.434493,-0.64031 -0.40019,-0.65174 -0.388757,-0.6746 -0.354454,-0.67461 -0.331587,-0.69748 -0.308718,-0.7089 -0.285851,-0.72035 -0.262982,-0.73177 -0.22868,-0.73178 -0.205813,-0.74321 -0.17151,-0.75465 -0.160076,-0.75464 -0.11434,-0.75465 -0.102906,-0.76608 -0.0686,-0.77751 -0.0343,-0.76608 -0.02287,-0.76608 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
id="path7"
d="m 123.73415,104.54594 0.0229,-0.77751 0.0343,-0.76608 0.0686,-0.75465 0.10291,-0.76607 0.11434,-0.75465 0.14864,-0.754644 0.18295,-0.754645 0.19437,-0.731777 0.22868,-0.731777 0.26299,-0.731777 0.27441,-0.708909 0.30872,-0.708909 0.33159,-0.686041 0.35445,-0.686041 0.37732,-0.663173 0.4002,-0.663173 0.43449,-0.628871 0.44592,-0.628871 0.4688,-0.606003 0.49166,-0.594569 0.51453,-0.5717 0.5374,-0.560267 0.54883,-0.537399 0.57171,-0.514531 0.59456,-0.491662 0.60601,-0.480229 0.62887,-0.445927 0.6403,-0.434492 0.65174,-0.400191 0.67461,-0.388756 0.68604,-0.354455 0.68604,-0.331586 0.70891,-0.308719 0.72034,-0.28585 0.73178,-0.251549 0.73178,-0.240114 0.74321,-0.194378 0.75464,-0.182944 0.75465,-0.148643 0.75464,-0.125774 0.76608,-0.102906 0.77751,-0.0686 0.76608,-0.0343 0.77752,-0.01143 0.76608,0.01143 0.76608,0.0343 0.76607,0.0686 0.75465,0.102906 0.76608,0.11434 0.74321,0.160077 0.75464,0.17151 0.74322,0.205812 0.73177,0.22868 0.72035,0.251549 0.7089,0.274416 0.70891,0.308719 0.69748,0.331586 0.67461,0.354455 0.6746,0.377322 0.65174,0.400191 0.64031,0.434492 0.61743,0.445927 0.60601,0.468795 0.59457,0.491662 0.5717,0.514531 0.56026,0.537399 0.5374,0.548833 0.51453,0.5717 0.49166,0.594569 0.48023,0.606003 0.44593,0.628871 0.43449,0.640305 0.40019,0.651739 0.38876,0.674607 0.35445,0.686041 0.33159,0.686041 0.30872,0.708909 0.28585,0.720343 0.26298,0.731777 0.22868,0.731777 0.20581,0.743211 0.17151,0.754645 0.14865,0.754642 0.12577,0.76608 0.10291,0.76608 0.0686,0.76608 0.0343,0.76608 0.0229,0.77751 v 35.697 l -0.0229,0.76608 -0.0343,0.76608 -0.0686,0.76608 -0.10291,0.75464 -0.11434,0.76608 -0.14864,0.75465 -0.18295,0.74321 -0.19437,0.74321 -0.22868,0.73178 -0.26299,0.72034 -0.27441,0.70891 -0.30872,0.70891 -0.33159,0.69747 -0.35445,0.67461 -0.37732,0.67461 -0.4002,0.65174 -0.42305,0.6403 -0.45736,0.61744 -0.4688,0.606 -0.49166,0.59457 -0.51453,0.5717 -0.5374,0.56027 -0.54883,0.5374 -0.5717,0.51453 -0.59457,0.49166 -0.60601,0.48023 -0.62887,0.44593 -0.6403,0.43449 -0.65174,0.40019 -0.67461,0.38875 -0.68604,0.35446 -0.68604,0.33159 -0.70891,0.30871 -0.72034,0.28585 -0.73178,0.26299 -0.73178,0.22868 -0.74321,0.20581 -0.75464,0.17151 -0.75465,0.16008 -0.75464,0.11434 -0.76608,0.1029 -0.77751,0.0686 -0.76608,0.0343 -0.76608,0.0229 -0.77752,-0.0229 -0.76608,-0.0343 -0.76607,-0.0686 -0.75465,-0.1029 -0.75464,-0.11434 -0.75465,-0.14865 -0.75464,-0.18294 -0.74322,-0.19438 -0.73177,-0.22868 -0.72035,-0.26298 -0.7089,-0.27442 -0.70891,-0.30872 -0.69748,-0.33158 -0.67461,-0.35446 -0.6746,-0.37732 -0.65174,-0.40019 -0.64031,-0.42306 -0.61743,-0.45736 -0.60601,-0.46879 -0.59456,-0.49167 -0.57171,-0.51453 -0.56026,-0.52596 -0.5374,-0.56027 -0.51453,-0.5717 -0.49166,-0.59457 -0.48023,-0.606 -0.44593,-0.62887 -0.43449,-0.64031 -0.40019,-0.65174 -0.38876,-0.6746 -0.35445,-0.67461 -0.33159,-0.69748 -0.30872,-0.7089 -0.28585,-0.72035 -0.26298,-0.73177 -0.22868,-0.73178 -0.20581,-0.74321 -0.17151,-0.75465 -0.14865,-0.75464 -0.12577,-0.75465 -0.10291,-0.76608 -0.0686,-0.77751 -0.0343,-0.76608 -0.0229,-0.76608 z"
style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none" />
<path
id="path9"
d="M 22.337294,131.34728 V 88.252469 l 0.354454,-7.294902 1.200572,-6.837542 2.000953,-6.608861 2.778466,-6.368747 3.498809,-6.094331 4.161982,-5.762744 4.825155,-5.442592 5.351119,-4.985231 5.911387,-4.596474 6.345878,-4.081944 6.757504,-3.567413 7.08909,-2.984278 7.386375,-2.401144 7.569318,-1.73797 7.752263,-1.074798 7.798001,-0.365888 6.39161,0.377322 6.49452,1.131968 6.59743,1.852311 6.59743,2.538351 6.50595,3.167223 6.32301,3.738923 6.0829,4.287756 5.73988,4.756551 5.32825,5.191043 4.80229,5.511196 4.25345,5.842782 3.60171,6.060029 2.88138,6.208671 2.12672,6.311577 1.30348,6.368747 0.4688,6.620295 v 43.334925 h 13.33206 V 87.54356 l -0.56027,-7.958075 -1.6465,-8.026679 -2.61839,-7.797999 -3.48737,-7.500715 -4.26489,-7.169128 -4.93949,-6.791806 -5.56837,-6.391615 -6.0829,-5.92282 -6.55169,-5.431158 -6.94045,-4.893759 -7.27203,-4.310624 -7.51215,-3.647451 -7.70653,-2.9614098 -7.84373,-2.1953311 -7.90091,-1.383516 -7.84373,-0.4687946 -9.11291,0.4230586 -8.929967,1.2348737 -8.735588,2.0238209 -8.472606,2.7441643 -8.152454,3.441638 -7.763697,4.093378 -7.340638,4.722248 -6.826108,5.29395 -6.311577,5.888518 -5.63697,6.368747 -4.973797,6.883278 -4.207718,7.329204 -3.384469,7.752263 -2.469748,8.14102 -1.4749878,8.449738 -0.4116246,8.461172 v 43.403529 z"
style="fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" />
</svg>
out put :
I would like to extract 2 lists of numeric numbers contained in the comments of my .xml (svg) file:
The second list has a variable position in the xml file (here: r1[[2]][[6]]) so I would like to find some index for the comment text:
Here is my current result, OK but index found by hand.
r1[[2]][[2]]
r1[[2]][[6]]
This code is working but I needed to find r1[[1]][[6]] index 6 by hand.
library(XML)
filepath1 <- paste("MyPath\\", sep="")
filename.cbv <- paste(filepath1,"CBV_Simpler.svg",sep="")
xml.cbv <- xmlTreeParse(filename.cbv,asText = FALSE)
r1 <- xmlRoot(xml.cbv) ##get the top node of the document
xmlSize(r1) # 2 nodes only, our data are under node 2
r1[[2]][[2]]
r1[[2]][[6]]
leftHemishpval1 <- xmlValue(r1[[2]][[2]])
righttHemishpval1 <- xmlValue(r1[[2]][[6]])
My SVG example file is here:
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="1070"
height="1200"
zoomAndPan="magnify">
<text x="520" y="20" text-anchor="middle" font-size="18" font-family="Arial">Test Image</text>
<g transform="translate(20, 50) scale(1, 1)" font-family="Arial">
<g transform="translate(0, 250) scale(1, -1)">
<polygon points="0,0 1000,0 1000,200 0,200" style="stroke-width:1;stroke:#000000;fill:#ffffff" />
</g>
<!--
Left Hemisphere
0.025, 0
0.0753676, 0
0.125735, 0
0.176103, 0
0.226471, 0
0.276838, 883
0.327206, 1833
0.377574, 4319
0.427941, 4905
0.478309, 7499
0.528676, 10246
0.579044, 18289
0.629412, 21230
0.679779, 20371
0.730147, 27955
-->
<g transform="translate(0, 250) scale(1, -1)">
<path d="M 0,0 L 0,0 L 7.35294,0 L 14.7059,0 L 22.0588,0 L 29.4118,0 L 36.7647,3.01731 L 44.1176,6.26356 L 51.4706,14.7585 L 58.8235,16.7609 L 66.1765,25.6249 L 73.5294,35.0117 L 80.8824,62.4955 L 88.2353,72.5452 L 95.5882,69.6099 L 102.941,95.5253 L 110.294,133.366 L 117.647,126.888 L 125,103.197 L 132.353,127.034 L 139.706,122.104 L 147.059,135.892 L 154.412,88.7526 L 161.765,112.184 L 169.118,140.166 L 176.471,99.0039 L 183.824,150.537 L 191.176,101.854 L 198.529,127.971 L 205.882,159.019 L 213.235,108.667 L 220.588,170.521 L 227.941,149.529 L 235.294,123.204 L 242.647,190.203 L 250,130.824 L 257.353,164.756 L 264.706,199.484 L 272.059,131.73 L 279.412,200 L 286.765,134.648 L 294.118,165.077 L 301.471,196.497 L 308.824,160.283 L 316.176,125.548 L 323.529,150.923 L 330.882,146.403 L 338.235,168.73 L 345.588,136.373 L 352.941,105.305 L 360.294,126.888 L 367.647,122.674 L 375,141.082 L 382.353,113.076 L 389.706,86.798 L 397.059,102.961 L 404.412,97.0117 L 411.765,107.417 L 419.118,84.8161 L 426.471,64.1938 L 433.824,75.624 L 441.176,72.2753 L 448.529,80.9616 L 455.882,63.3532 L 463.235,59.0306 L 470.588,44.5249 L 477.941,51.7248 L 485.294,47.1834 L 492.647,51.5744 L 500,39.2455 L 507.353,28.8609 L 514.706,32.9888 L 522.059,30.4943 L 529.412,32.9409 L 536.765,23.9334 L 544.118,18.6437 L 551.471,21.808 L 558.823,19.1119 L 566.176,22.0472 L 573.529,16.7575 L 580.882,12.4007 L 588.235,17.4853 L 595.588,11.0851 L 602.941,12.3768 L 610.294,13.4156 L 617.647,8.2079 L 625,10.5281 L 632.353,5.6929 L 639.706,6.49934 L 647.059,6.64628 L 654.412,3.70756 L 661.765,4.7737 L 669.118,2.8157 L 676.471,2.95922 L 683.824,3.02072 L 691.176,1.66413 L 698.529,2.16645 L 705.882,1.24383 L 713.235,1.17549 L 720.588,0.994379 L 727.941,0.611663 L 735.294,0.587743 L 742.647,0.399802 L 750,0.454476 L 757.353,0.351962 L 764.706,0.232363 L 772.059,0.375882 L 779.412,0.174273 L 786.765,0.17769 L 794.118,0.256283 L 801.471,0.126433 L 808.823,0.12985 L 816.176,0.0888448 L 823.529,0.109347 L 830.882,0.0854277 L 838.235,0.061508 L 845.588,0.061508 L 852.941,0.0341711 L 860.294,0.030754 L 867.647,0.0239198 L 875,0.00683422 L 882.353,0.0375882 L 889.706,0.0205027 L 897.059,0.0136684 L 904.412,0.0136684 L 911.765,0 L 919.118,0 L 926.471,0 L 933.823,0 L 941.176,0 L 948.529,0 L 955.882,0 L 963.235,0 L 970.588,0 L 977.941,0 L 985.294,0 L 992.647,0 L 1000,0 L 1000,0 " style="stroke-width:4;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 37.8805,100 L 37.8805,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 161.33,100 L 161.33,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 284.781,100 L 284.781,205" style="stroke-width:3;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 408.23,100 L 408.23,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 531.681,100 L 531.681,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 655.131,100 L 655.131,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 778.581,100 L 778.581,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 902.031,100 L 902.031,205" style="stroke-width:1;stroke:#ff0000;fill:#ff0000;fill-opacity:0.4" />
<path d="M 277.372,100 L 277.372,205" style="stroke-width:3;stroke:#000000;fill:#000000;fill-opacity:0.4" />
<path d="M 100,-20 L 100,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 300,-20 L 300,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 500,-20 L 500,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 600,-20 L 600,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 900,-20 L 900,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
</g>
<text x="500" y="20" text-anchor="middle" font-size="14">Left (median = 1.234, μ = 1.2345, σ = +/-0.1234)</text>
<text x="1000" y="290" text-anchor="middle" font-size="12">1.2345</text>
<!--
Right Hemisphere
0.025, 0
0.0753676, 50
0.125735, 2781
0.176103, 8161
0.226471, 9881
0.276838, 20905
0.327206, 18107
0.377574, 31681
0.427941, 22355
0.478309, 29350
0.528676, 29104
0.579044, 35388
0.629412, 31030
0.679779, 26076
0.730147, 36480
-->
<g transform="translate(0, 250) scale(1, -1)">
<path d="M 0,0 L 0,0 L 7.35294,0.170855 L 14.7059,9.50298 L 22.0588,27.887 L 29.4118,33.7645 L 36.7647,71.4347 L 44.1176,61.8736 L 51.4706,108.257 L 58.8235,76.3895 L 66.1765,100.292 L 73.5294,99.4516 L 80.8824,120.925 L 88.2353,106.033 L 95.5882,89.1045 L 102.941,124.656 L 110.294,163.686 L 117.647,144.937 L 125,113.069 L 132.353,132.813 L 139.706,132.864 L 147.059,159.948 L 154.412,103.186 L 161.765,128.805 L 169.118,151.043 L 176.471,97.8626 L 183.824,143.932 L 191.176,92.7062 L 198.529,114.682 L 205.882,137.669 L 213.235,93.9773 L 220.588,145.453 L 227.941,123.303 L 235.294,98.5734 L 242.647,150.377 L 250,100.586 L 257.353,128.111 L 264.706,155.222 L 272.059,105.397 L 279.412,157.993 L 286.765,105.165 L 294.118,128.473 L 301.471,150.363 L 308.824,123.057 L 316.176,95.0913 L 323.529,117.788 L 330.882,116.503 L 338.235,135.499 L 345.588,110.017 L 352.941,84.7853 L 360.294,104.833 L 367.647,100.497 L 375,115.215 L 382.353,94.3088 L 389.706,73.3414 L 397.059,89.2651 L 404.412,85.0484 L 411.765,98.2829 L 419.118,77.7597 L 426.471,58.7059 L 433.824,71.0109 L 441.176,65.4513 L 448.529,75.8427 L 455.882,58.6786 L 463.235,54.8583 L 470.588,41.5521 L 477.941,49.4114 L 485.294,45.0614 L 492.647,50.7612 L 500,39.8572 L 507.353,29.7289 L 514.706,35.0049 L 522.059,32.8111 L 529.412,36.3102 L 536.765,27.5624 L 544.118,20.6735 L 551.471,24.0257 L 558.823,22.1395 L 566.176,24.5724 L 573.529,18.8795 L 580.882,14.0785 L 588.235,19.8363 L 595.588,12.2606 L 602.941,14.427 L 610.294,15.9032 L 617.647,9.56791 L 625,13.4702 L 632.353,8.33091 L 639.706,9.39705 L 647.059,10.2308 L 654.412,6.3114 L 661.765,8.89132 L 669.118,5.31019 L 676.471,6.46859 L 683.824,7.20668 L 691.176,4.24405 L 698.529,6.19522 L 705.882,3.84083 L 713.235,4.23722 L 720.588,4.74978 L 727.941,2.87721 L 735.294,3.834 L 742.647,2.24504 L 750,2.26554 L 757.353,2.26213 L 764.706,1.14131 L 772.059,1.66413 L 779.412,0.796187 L 786.765,0.844026 L 794.118,0.796187 L 801.471,0.444224 L 808.823,0.56724 L 816.176,0.30754 L 823.529,0.41347 L 830.882,0.392968 L 838.235,0.235781 L 845.588,0.242615 L 852.941,0.174273 L 860.294,0.181107 L 867.647,0.17769 L 875,0.119599 L 882.353,0.0990962 L 889.706,0.0273369 L 897.059,0.0341711 L 904.412,0.0341711 L 911.765,0.0239198 L 919.118,0.0410053 L 926.471,0.0136684 L 933.823,0.0102513 L 941.176,0.0102513 L 948.529,0.0136684 L 955.882,0.00683422 L 963.235,0 L 970.588,0 L 977.941,0 L 985.294,0 L 992.647,0 L 1000,0 L 1000,0 " style="stroke-width:4;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 119.889,-5 L 119.889,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 265.02,-5 L 265.02,100" style="stroke-width:3;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 410.151,-5 L 410.151,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 555.282,-5 L 555.282,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 700.413,-5 L 700.413,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 845.544,-5 L 845.544,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 990.674,-5 L 990.674,100" style="stroke-width:1;stroke:#0000ff;fill:#0000ff;fill-opacity:0.4" />
<path d="M 255.474,-5 L 255.474,100" style="stroke-width:3;stroke:#000000;fill:#000000;fill-opacity:0.4" />
<path d="M 100,-20 L 100,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 200,-20 L 200,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 300,-20 L 300,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 400,-20 L 400,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 500,-20 L 500,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 600,-20 L 600,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 700,-20 L 700,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 800,-20 L 800,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
<path d="M 900,-20 L 900,10" style="stroke-width:1;stroke:#777777;fill:#777777;fill-opacity:0.0" />
</g>
<text x="1000" y="290" text-anchor="middle" font-size="12">1.2345</text>
</g>
</svg>
Using the xml2 library, read the file
xml <- read_xml(filename.cbv)
the 'xpath' (this section of the specification provides a succinct overview of the XPath syntax, useful for many basic processing steps) to comment nodes can be specified in various ways; for your document above where you are interested in all comments, a path is //comment() and the nodes can be found with
comments <- xml_find_all(xml, "//comment()")
These can be coerced into a character vector with
value <- as.character(comments)
though one still needs to parse these for use in R, e.g., with
read.csv(textConnection(value[[1]]), skip=2, header = FALSE, nrow = 15)
or maybe a little more robustly (but still depending on knowledge of the internal structure of the comment) by trimming the first two (tail(txt, -2)) and the last (head(., -1)) lines from the comment before parsing
txt <- textConnection(value[[1]])
read.csv(text = head(tail(txt, -2), -1), header = FALSE)
I think the parsing step with the XML package is
xml <- xmlParse(filename.cbv)
value <- xpathApply(xml, "//comment()", as, "character")
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!)