JSFiddle - React, Tailwind, and code Playground

by swfour

HTML

<svg onresize="vsOnresize(this);" id="visualisation" style="OVERFLOW: scroll; BACKGROUND: #fff; POSITION: absolute; width:100%; height:100%;" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="none" scale="1.8828635765400006" onload="vsOnLoad(this, this.parentNode);" viewBox="-206.27679443359375 412 3126 1619">
  <defs>
    <linearGradient id="selected" spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%">
      <stop stop-opacity="1" stop-color="#007aa3" offset="0%"></stop>
      <stop stop-opacity="1" stop-color="#0f89b1" offset="100%"></stop>
    </linearGradient>
    <linearGradient id="focussed" spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%">
      <stop stop-opacity="1" stop-color="#888" offset="0%"></stop>
      <stop stop-opacity="1" stop-color="#333" offset="100%"></stop>
    </linearGradient>
    <linearGradient id="focussedselected" spreadMethod="pad" y2="100%" x2="0%" y1="0%" x1="0%">
      <stop stop-opacity="1" stop-color="#1d8fb5" offset="0%"></stop>
      <stop stop-opacity="1" stop-color="#2384a5" offset="100%"></stop>
    </linearGradient>
    <pattern id="ptn_track_t1" x="0" width="50" y="-25" height="120" patternUnits="userSpaceOnUse">
      <image alt="" width="50" height="120" xlink:href="WCS/WFL/AGV/TXITrack_t.png"></image> 
    </pattern>
    <pattern id="ptn_track_r1" x="25.5" width="120" y="0" height="50" patternUnits="userSpaceOnUse">
      <image alt="" width="120" height="50" xlink:href="WCS/WFL/AGV/TXITrack_r.png"></image> 
    </pattern>
    <pattern id="ptn_track_b1" x="0" width="50" y="0" height="120" patternUnits="userSpaceOnUse">
      <image alt="" width="50" height="120" xlink:href="WCS/WFL/AGV/TXITrack_b.png"></image> 
    </pattern>
    <pattern id="ptn_track_l1" x="40" width="120" y="0" height="50" patternUnits="userSpaceOnUse">
      <image alt="" width="120" height="50"...

CSS

@namespace xlink 'http://www.w3.org/1999/xlink';
svg image[xlink|href*="temp"] {
    outline: 3px solid red;
}