Override text style in SVG

Question

How can i override text style in a SVG tag. I have below text-decoration as line-through in legend of my graph when i click and i need it to be text-decoration: none but i haven't been able to override it. Any idea how i can fix it?

<text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" style="font: 14px sans-serif; text-decoration: line-through;">Customer</text>

I did this text{text-decoration:none }. yet the initial style take precedence. — Emac4444, Dec 13 '20 at 21:37
If your code already uses a lot of Javascript, then you should probably use the answer from Renato Sant'Anna. For what you currently have, the answer from İsmail Durmaz is a bit overdone. The use of a library is unnecessary considering the fact that the pure JS form is less code. Of course, since you are using SVG, I'd recommend you to look a the d3 library he mentioned — Rojo, Dec 14 '20 at 23:59

score 1 · Accepted Answer · answered Dec 13 '20 at 21:36

1

You can override the style attribute like this.

document.querySelector('text').style = 'font: 14px sans-serif; text-decoration: none';

Or the text-decoration directly like this.

document.querySelector('text').style.textDecoration = 'none';

answered Dec 13 '20 at 21:36

Frederic Brüning

156
7

the issue persist – Emac4444 Dec 13 '20 at 22:30

score 1 · Answer 2 · answered Dec 13 '20 at 22:03

You can add event in action click of text:

<html>
<body>
     <text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" style="font: 14px sans-serif; text-decoration: line-through;">Customer</text>
     <script>
         document.querySelector("text").addEventListener("click", function() {
             document.querySelector('text').style.textDecoration = 'none';
         });         
     </script>
</body>
</html>

score 0 · Answer 3 · answered Dec 13 '20 at 21:45

You can use d3 javascript library. It can easily manage svg elements.

<script src="https://d3js.org/d3.v5.js"></script>
<text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" style="font: 14px sans-serif; text-decoration: line-through;">Customer</text>

<button onclick="change()">Click</button>

<script type="text/javascript">
function change(){
    d3.select('text').style('text-decoration', 'none');
}
</script>

Its a pentaho ccc chart not d3 – Emac4444 Dec 13 '20 at 22:29 — Emac4444, Dec 13 '20 at 22:29

score 0 · Answer 4 · answered Dec 14 '20 at 23:59

Here's the CSS version:

text {
  font: 14px sans-serif;
  text-decoration: line-through;
}

#btnControl {
  display: none;
}

#btnControl:checked + label > text {
  text-decoration: none;
}

<input type="checkbox" id="btnControl">
<label class="btn" for="btnControl"><text pointer-events="all" cursor="pointer" x="3" dy=".35em" transform="translate(15,8)" fill="rgb(150,150,150)" id="text">Customer</text></label>

I took this from TylerH.

<label for=""> (MDN)

It adds a bit more HTML and CSS but it avoids Javascript if that's something you want. Of course, I recommend you to have different ID names if you need this for multiple elements.

Override text style in SVG

4 Answers4