#angular #svg
Вопрос:
Как я могу получить доступ к атрибуту (например, заливке) объекта SVG через угловое событие (например, mouseenter)?
Я попробовал эти варианты, но безуспешно.
lt;rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.fill='red'/gt; lt;rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attr.fill='red'/gt; lt;rect #rrr [attr.fill]="'green'" (mouseenter)="rrr.attributes.fill='red'/gt; Я хочу сделать это напрямую — поэтому я использую #rrr. Отправка его через переменную компонента работает хорошо, но не то, что я хочу.
lt;rect [attr.fill]="myvar == true ? 'red' : 'green'" (mouseenter)="myvar = true"/gt; Ответ №1:
Вы можете использовать любой из этих вариантов:
#rrr (mouseenter)="rrr.setAttribute('fill', 'red')" #rrr (mouseenter)="rrr.style.fill = 'red'" Ответ №2:
Попробуйте использовать класс для достижения этой цели:
lt;rect [ngClass] = "{'red': myvar==true, 'green': myvar!=true}"/gt; На вашем css:
.gren { fill:green; } .red{ fill: red; } Комментарии:
1. ОП заявил, что они не хотят использовать компонентную переменную, такую как
myvar.2. С помощью этого метода вы могли бы сделать свой html-шаблон более чистым.
3. 1. Фактически да, это может быть, но требование OPs не совпадает с ответом. 2. Это может быть более чистым, используя тернарный оператор:
[ngClass]="myvar ? 'red' : 'green'".4. Для меня это выглядит более чистым :).