Как сделать треугольную svg картинку?

Question

[Кирилл]

Мне нужна именно треугольник, чтобы при наведении курсором из панели разработчика был треугольник, а не треугольник в квадрате. Как такое реализовать?

Треугольник

Comments

[Александр]

Маску пробовали?

Answer 1

[Андрей]

никакого svg не надо
https://codepen.io/web-tiki/pen/icClo

Comments

[Stalker_RED]

А это что?

[Андрей]

Stalker_RED, это в каком так браузере отображается?

[Stalker_RED]

Андрей, в хроме

при наведении курсором из панели разработчика

Answer 2

[Антон Спирин]

Подобные вещи легко реализуются с помощью clip-path.
Пример.
Генератор.
can-i-use (пользователи IE и Edge в пролете)

Чтобы в панели разработчика видеть треугольник, придется написать свой рендер движок со своими спецификациями. Не стоит эта хотелка такого колоссального труда.

Возможно, для вашей задачи подойдет вариант использования png картинки с прозрачностью.
А, вариант от Андрей является отличным и кросс-браузерным решением.

Answer 3

[Bharata]

чтобы при наведении курсором из панели разработчика был треугольник, а не треугольник в квадрате

Думаю, что ты неправильно представляешь себе своё желание.

Вполне будет достаточно, если при наведении мышки на треугольник будет срабатывать событие 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