[英]Apply CSS style when clicked on SVG element
我正在嘗試為單擊的元素設置 CSS 樣式。 我嘗試使用 class 名稱放置:active
:clicked
:targed
targeted ,但這些都不起作用。 :hover
效果很好。 感謝您的回答。
HTML:
<a (click)="Clicked(14)" class="lankstumas">
<ellipse
class="e-image"
id="path3769-9"
cx="43.089287"
cy="103.09822"
rx="43.845238"
ry="39.498512"
style="fill:#ff7f2a;stroke-width:0.26458332" />
<text
class="e-text"
xml:space="preserve"
style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332"
x="22.300594"
y="99.318459"
id="text3836"><tspan
sodipodi:role="line"
id="tspan3834"
x="22.300594"
y="99.318459"
style="stroke-width:0.26458332">LANKS - </tspan><tspan
sodipodi:role="line"
x="22.300594"
y="112.54762"
style="stroke-width:0.26458332"
id="tspan3838">TUMAS</tspan></text>
</a>
CSS:
.lankstumas:hover{
.e-image{
transition: .2s fill;
fill: #FF8504!important;
}
.e.text{
transition: .2s fill;
fill:#fff!important;
}
}
我正在嘗試為單擊的元素設置 CSS 樣式。
實現此效果的一種方法是給元素一個HTML5 Custom data-*
屬性,如下所示:
data-clicked="false"
然后,您可以使用 javascript 來檢測對元素的點擊並更新屬性。
要使用 javascript 檢測點擊,請使用:
myElement.addEventListener('click', myFunction, false);
要修改屬性,請使用:
myElement.dataset.myAttribute = myValue;
工作示例:
const boxes = document.getElementsByClassName('box'); const showClick = (e) => { event.target.dataset.clicked = 'true'; } for (let i = 0; i < boxes.length; i++) { boxes[i].addEventListener('click', showClick, false); }
.box { display: inline-block; width: 100px; height: 100px; margin: 6px; background-color: rgb(255, 0, 0); cursor: pointer; }.box::after { content: 'Click me;': display; block: text-align; center: line-height; 100px: color, rgb(255, 255; 255): font-weight; bold. }:box[data-clicked="true"] { color, rgb(255, 0; 0): background-color, rgb(255, 255; 0). }:box[data-clicked="true"]::after { content; 'Clicked:', color, rgb(255; 0, 0); }
<div class="box" data-clicked="false"></div> <div class="box" data-clicked="false"></div> <div class="box" data-clicked="false"></div> <div class="box" data-clicked="false"></div> <div class="box" data-clicked="false"></div>
在您的代碼中,您要覆蓋內聯 css。 為了更改顏色,您需要刪除用於fill
的內聯 styles。 接下來是一個例子:
svg{border:solid;width:90vh;}.e-image{transition: .2s fill;}.lankstumas:hover.e-image{fill: skyBlue; }.lankstumas:hover.e-text{fill:#fff;}
<svg viewBox="-5 60 100 90"> <a class="lankstumas"> <ellipse class="e-image" id="path3769-9" cx="43.089287" cy="103.09822" rx="43.845238" ry="39.498512" fill="#ff7f2a" /> <text class="e-text" xml:space="preserve" style="font-style:normal;font-weight:normal;font-size:10.58333302px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;stroke:none;stroke-width:0.26458332" x="22.300594" y="99.318459" id="text3836"> <tspan sodipodi:role="line" id="tspan3834" x="22.300594" y="99.318459" style="stroke-width:0.26458332">LANKS - </tspan><tspan sodipodi:role="line" x="22.300594" y="112.54762" style="stroke-width:0.26458332" id="tspan3838">TUMAS</tspan></text> </a> </svg>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.