How to make triangular svg image?

Question

css

I need a triangle so that when hovering from the developer panel there is a triangle, and not a triangle in a square. How to implement this?

Triangle

Answer 1

no svg needed
https://codepen.io/web-tiki/pen/icClo

Answer 2

This kind of thing is easily done with clip-path .
Example.
Generator.
can-i-use ( IE and Edge users in transit)
In order to see a triangle in the developer panel, you will have to write your own render engine with your own specifications. This Wishlist is not worth such a colossal work.
Perhaps, for your task, the option of using a png image with transparency is suitable. And, Andrey
's version is a great and cross-browser solution.

Answer 3

so that when you hover from the developer panel, there is a triangle, and not a triangle in a square

I think you misunderstand your desire.
It will be enough if when you hover the mouse over the triangle, the onmouseover event fires and when you exit it, onmouseout . The event is attached to path. Everything else will remain invisible to the user.

<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>

How to add background-image to SVG path