чтобы при наведении курсором из панели разработчика был треугольник, а не треугольник в квадрате
Думаю, что ты неправильно представляешь себе своё желание.
Вполне будет достаточно, если при наведении мышки на треугольник будет срабатывать событие
onmouseover и при выходе из него
onmouseout. Событие прикрепляется к path. Всё остальное для пользователя останется невидимым.
<svg><path id="p1" d="M10,100L100,10L190,100Z" fill="#00f"/></svg>
<script type="text/javascript">
var p1 = document.getElementById('p1');
p1.onmouseover = function(e)
{
this.setAttribute('fill', '#0f0')
}
p1.onmouseout = function(e)
{
this.setAttribute('fill', '#00f')
}
</script>
Дополнительно:Как добавить background-image к SVG path
