<div class="container">
  <div class="hover-stroke-red">
    <svg width="200" height="200">
      <use xlink:href="#heart"/>
    </svg>
  </div>

  <div class="hover-stroke-green">
    <svg width="200" height="200">
      <use xlink:href="#heart"/>
    </svg>
  </div>
</div>

<svg style="display:none" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <symbol id="heart" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
    <g id="ideate/line/love" clip-path="url(#clip0_1759_26884)">
      <path id="Vector" d="M9.80284 17.5752C-5.19626 5.10188 4.05213 -0.993139 9.78866 4.01376C9.89165 4.10366 9.94315 4.14861 9.99941 4.14861C10.0557 4.14861 10.1072 4.10366 10.2102 4.01376C15.9467 -0.993139 25.1951 5.10188 10.196 17.752C10.1011 17.6542 10.0536 17.6936 9.99941 17.6936C9.94519 17.6936 9.89774 17.6542 9.80284 17.5752Z" 
            stroke="var(--stroke, blue)" stroke-width="1.5" stroke-linecap="round"/>
    </g>
    <defs>
      <clipPath id="clip0_1759_26884">
        <rect width="20" height="20" fill="white"/>
      </clipPath>
    </defs>
  </symbol>
</svg>

.hover-stroke-red:hover {
  --stroke: red;
}
.hover-stroke-green:hover {
  --stroke: green;
}


.container {
  display: flex;
}