An SVG using URL fragments to change the VIEWbox

test-1-view.svg

test-2-target.svg

test-3-both.svg

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 500 150">
 <style xmlns="http://www.w3.org/2000/svg">
    .text{
     fill: rgb(255, 255, 255); 
     font-family: Arial, sans-serif; 
     font-size: 16px; 
     white-space: pre;
    }
    .base{ /* switch off by default */
        display: none; 
    }
    svg{
       scroll-behavior: smooth;
    }
    defs:has(#view-1:target) ~ g .red{  /* switch ON if target URL matches */
        display: block;
    }
    defs:has(#view-2:target) ~ g .blue{
        display: block;
    }
    defs:has(#view-3:target) ~ g .yellow{
        display: block;
    }
</style>
 <defs>
    <!-- The VIEWs -->
  <view id="view-1" viewBox="0 0 176 150">
   <title>View 1</title>
  </view>
  <view id="view-2" viewBox="176 0 163 150">
   <title>View 2</title>
  </view>
  <view id="view-3" viewBox="336 0 163 150">
   <title>View 3</title>
  </view>
 </defs>
 <g>
  <path class="green" fill="#4B9F14" d="M500 0H0v150h500V0Z"/>
  <path class="red base" fill="#C32424" d="M176 0H0v150h176V0Z"/>
  <path class="blue base" fill="#0B6EE6" d="M336 0h-160v150h160V0Z"/>
  <path class="yellow base" fill="#FFaa00" d="M500 0H336v150H500V0Z"/>
  
  <g class="letter-c">
   <path fill="#fff" d="M446.3 30.8 443 49.5c-9-2-14.3-2.8-21-2-13.8 1.5-19.2 10-20 21.2-1.1 13.4 3.5 20.5 21.1 20.5 6 0 13.7-.7 20.6-4.2l1 28.2h-36.1c-16.5 0-30.7-19.7-27-43.7 4.4-28 22.3-39.7 40-40.6 6-.3 15.8.3 24.8 1.9Z"/>
  </g>
  
  <g class="letter-b">
   <path fill="#fff" d="M222.8 113.2V29.5h27.3c17.5 0 27.9 8 27.9 22 0 7.3-2.5 12.9-7 16.2 9 3.7 13.6 9 13.9 20.7.5 21.9-13.7 24.8-31.2 24.8h-30.9Zm16.4-51.6h12.6c8.8 0 12.5-2.8 12.5-8.9 0-6.7-4.3-10.5-12.5-10.5h-12.6v19.4Zm0 30.2H253c11.6 0 14.3-1.2 14.3-7.7 0-1-.6-3.4-3.6-5.5A17.8 17.8 0 0 0 253 76h-14v15.8Z"/>
  </g>
  
  <g class="letter-a">
   <path fill="#fff" d="m43.8 113.2 33-83.5h13.9l33 83.5h-21.5l-3-12.7H68.3l-3.9 12.7H43.8Zm29.6-30.9h20.8L83.6 48.7 73.4 82.3Z"/>
  </g>
  
 </g>
 <!-- Links to fragment urls -->
 <a href="#view-1">
  <text class="text" x="57" y="135">#view-1</text>
 </a>
 <a href="#view-2">
  <text class="text" x="227" y="135">#view-2</text>
 </a>
 <a href="#view-3">
  <text class="text" x="380" y="135">#view-3</text>
 </a>
 
</svg>

Cool. Got this working. Launch the 'RAW' link in the bottom example into a new tab and click one of the view links. It should reframe the document around that letter, and simultaneously switch on a background color. I'm not using a clip path to forcibly crop off what you can see on the edges. If you specified a height and width If wouldn't normally crop that extra image out of frame.