JSFiddle - React, Tailwind, and code Playground

by jakethashi

HTML

<svg height="200" width="150">
  <path id="path1" transform="translate(0,0)scale(10)" d="M7.5 0 L0 20 L15 20 Z" />
</svg>
<svg height="200" width="150">
    <path id="path2" transform="translate(0,0)scale(1000)" d="M0.075 0 L0 0.2 L0.15 0.2 Z" />
    
<g class="highcharts-markers highcharts-tracker" visibility="visible" zIndex="55" transform="translate(0,0) scale(1 1)" style="" clip-path="none"><g style="text-align:center;" transform="translate(0,0)"><image preserveAspectRatio="none" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img/empty2.jpg" x="-1" y="0" width="100" height="100" fill="none" anchorX="53.21137881568586" anchorY="29" transform="translate(3,3)"></image></g></g>
    
</svg>

CSS

#path1 {
		fill: rgb(255, 0, 0);
	}

	#path2 {
		fill: rgb(0, 0, 255);
	}

	svg {
		border-style: dotted;
		border-width: 2px;

	}

JavaScript

d3.selectAll(".highcharts-tracker").on("mouseover", function (d) {
	var selection = d3.select(this)
	selection.transition().duration(500).style("opacity", 0.25);
});
d3.selectAll(".highcharts-tracker").on("mouseout", function () {
	var selection = d3.select(this)
	selection.transition().duration(500).style("opacity", 0.7);
});