JSFiddle - React, Tailwind, and code Playground

HTML

<object data="map.svg" type="image/svg+xml" id="imap" ><div id="imap" style="border:1px solid red; padding:50px;">
  <g transform="translate(163.5 261)">
<path width="211" height="90" d="M 0 10 L 201 0 L 211 90 L 0 10 z" style="stroke: Black; stroke-width: 1; stroke-dasharray: ; fill: Red; opacity: 1;" transform="translate(-105.5 -45)" />
</g>
<g transform="translate(281.5 30.5)">
<text font-family="'Times New Roman'" font-size="30" font-weight="400" style="stroke: none; stroke-width: 1; stroke-dasharray: ; fill: Black; opacity: 1;" transform="translate(-22.5 29)">
<tspan x="0" y="-19.5" fill="Black">ооо</tspan></text></g>  
    
</div>
</object>
<label> <input type="checkbox" id="hide_obj"> Скрыть </label>

JavaScript

$(function(){

    $('#hide_obj').click( function(e){
       var _this = $(this);
        return (!_this.is(':checked'))  
          ? $('object#imap g').show() : $('object#imap g').hide();

    });


});