$("g.red").on("click", function() {
$(this).css({
"transform": "scale(1.1)translate(-40px,-30px)"
});
$(".blue,.green").removeAttr("style");
$(".info1").show();
$(".info2,.info3").hide();
});
$("g.blue").on("click", function() {
$(this).css({
"transform": "scale(1.1)translate(10px,-30px)"
});
$(".red,.green").removeAttr("style");
$(".info2").show();
$(".info1,.info3").hide();
});
$("g.green").on("click", function() {
$(this).css({
"transform": "scale(1.1)translate(10px,5px)"
});
$(".blue,.red").removeAttr("style");
$(".info3").show();
$(".info1,.info2").hide();
});
jQuery(function($) {
$(document).mouseup(function(e) {
var el = $("g");
if (!el.is(e.target) &&
el.has(e.target).length === 0) {
el.removeAttr("style");
$(".info").hide();
}
});
});
svg {
width: 450px;
transform: translateY(-40px);
}
.items {
width: 300px;
height: 300px;
overflow: hidden;
}
.wrapper {
display: flex;
}
.info1,
.info2,
.info3 {
display: none;
background: inherit;
}
<div class="wrapper">
<div class="items">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 420">
<g class="red">
<path d="M 65.575894,283.98177 183.65971,154.16217 155.57143,72.378151 C 58.782665,95.809208 10.190442,191.8428 65.575894,283.98177 Z"
style="fill:red;" />
<text
xml:space="preserve"
style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
x="46.749924"
y="291.71173"
id="text4522"
transform="scale(1.2137117,0.8239189)"><tspan
id="tspan4520"
x="46.749924"
y="291.71173"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">3</tspan></text>
<text
xml:space="preserve"
style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;"
x="100.70348"
y="100.92748"
id="text4534"
transform="scale(0.79472758,1.2582928)"><tspan
id="tspan4532"
x="100.70348"
y="100.92748"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan
x="100.70348"
y="115.30096"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4536">is simply dummy</tspan><tspan
x="100.70348"
y="129.67444"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4538"> text of the printing </tspan><tspan
x="100.70348"
y="144.04791"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4540">and typesetting</tspan><tspan
x="100.70348"
y="158.42139"
style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4542"><tspan
style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4544"> industry</tspan>.</tspan></text>
</g>
<g class="green">
<path
style="fill:green;"
d="M 293.67227,256.41544 122.37935,218.97533 65.575894,283.98177 c 68.557676,72.00645 175.940786,66.19474 228.096376,-27.56633 z" />
<text
xml:space="preserve"
style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
x="191.37885"
y="345.22723"
id="text4530"
transform="scale(1.2137117,0.8239189)"><tspan
id="tspan4528"
x="191.37885"
y="345.22723"
style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411">2</tspan></text>
<text
transform="scale(1.0701775,0.93442444)"
id="text4568"
y="272.83636"
x="105.10145"
style="font-size:22.53310585px;line-height:12.48924828px;font-family:Lato;fill:#ffffff;"
xml:space="preserve"><tspan
style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
y="272.83636"
x="105.10145"
id="tspan4556">Lorem Ipsum </tspan><tspan
id="tspan4558"
style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
y="288.57037"
x="105.10145">is simply dummy</tspan><tspan
id="tspan4560"
style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
y="304.30438"
x="105.10145"> text of the printing </tspan><tspan
id="tspan4562"
style="font-size:11.89452267px;line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
y="320.03842"
x="105.10145">and typesetting</tspan><tspan
id="tspan4566"
style="line-height:12.48924828px;fill:#ffffff;stroke-width:0.84499151"
y="335.77243"
x="105.10145"><tspan
id="tspan4564"
style="font-size:11.89452267px;fill:#ffffff;stroke-width:0.84499151"> industry</tspan>.</tspan></text>
</g>
<g class="blue">
<path
style="fill:blue;"
d="m 155.57143,72.378151 53.2437,167.218489 84.85714,16.63865 C 321.85558,160.72205 263.06041,70.57337 155.57143,72.378151 Z" />
<text
transform="scale(1.2137117,0.8239189)"
id="text4526"
y="143.28191"
x="146.82492"
style="font-size:44.77183914px;line-height:41.97360229px;font-family:Lato;fill:#ffffff;"
xml:space="preserve"><tspan
style="fill:#ffffff;fill-opacity:1;stroke-width:1.67894411"
y="143.28191"
x="146.82492"
id="tspan4524">1</tspan></text>
<text
xml:space="preserve"
style="font-size:20.5846405px;line-height:11.40928841px;font-family:Lato;fill:#ffffff;"
x="251.44484"
y="106.87792"
id="text4582"
transform="scale(0.79472758,1.2582928)"><tspan
id="tspan4570"
x="251.44484"
y="106.87792"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408">Lorem Ipsum </tspan><tspan
x="251.44484"
y="121.2514"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4572">is simply dummy</tspan><tspan
x="251.44484"
y="135.62488"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4574"> text of the printing </tspan><tspan
x="251.44484"
y="149.99835"
style="font-size:10.86598873px;line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4576">and typesetting</tspan><tspan
x="251.44484"
y="164.37183"
style="line-height:11.40928841px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4580"><tspan
style="font-size:10.86598873px;fill:#ffffff;stroke-width:0.77192408"
id="tspan4578"> industry</tspan>.</tspan></text>
</g>
</svg>
</div>
<div class="informers">
<div class="info info1">
text1 text1 text1 text1 text1
</div>
<div class="info info2">
text2 text2 text2 text2 text2 text2
</div>
<div class="info info3">
text3 text3 text3 text3 text3 text3 text3
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>