間取り図ホバーズーム

<div class="d10-13-05-card">
          <p class="d10-13-05-title">間取り図（ホバー / クリックで拡大）</p>
          <div class="d10-13-05-plan-wrap">
            <svg class="d10-13-05-plan" viewBox="0 0 200 140">
              <rect x="4" y="4" width="192" height="132" fill="none" stroke="#8a94a3" stroke-width="2"/>
              <line x1="90" y1="4" x2="90" y2="80" stroke="#8a94a3" stroke-width="2"/>
              <line x1="4" y1="80" x2="196" y2="80" stroke="#8a94a3" stroke-width="2"/>
              <line x1="140" y1="80" x2="140" y2="136" stroke="#8a94a3" stroke-width="2"/>
              <text x="18" y="46" font-size="12" fill="#556">LDK</text>
              <text x="104" y="46" font-size="12" fill="#556">洋室</text>
              <text x="18" y="112" font-size="12" fill="#556">洋室</text>
              <text x="150" y="112" font-size="10" fill="#556">WC</text>
            </svg>
          </div>
        </div>

.d10-13-05{padding:16px}
        .d10-13-05-card{width:100%;max-width:260px;text-align:center}
        .d10-13-05-title{margin:0 0 8px;font-size:11.5px;font-weight:700;color:#334}
        .d10-13-05-plan-wrap{position:relative;border:1px solid #e6ecf0;border-radius:10px;overflow:hidden;background:#f8fafb;padding:8px;cursor:zoom-in}
        .d10-13-05-plan{display:block;width:100%;height:auto;transition:transform .35s ease;transform-origin:center center}
        .d10-13-05-plan-wrap:hover .d10-13-05-plan{transform:scale(1.35)}
        .d10-13-05-plan-wrap.is-pinned{cursor:zoom-out}
        .d10-13-05-plan-wrap.is-pinned .d10-13-05-plan{transform:scale(1.35)}

(function(){
        var root=document.getElementById('item-10-13-05');if(!root)return;
        var wrap=root.querySelector('.d10-13-05-plan-wrap');
        wrap.addEventListener('click',function(){
          wrap.classList.toggle('is-pinned');
        });
      })();