Can Javascript read SVG text element font size?

Question

I am unable access the font size of an SVG text element through Javascript.

The setup is as follows:

<svg class='outer' width='900' height='625'>
    <text class='graph-title' x='450' y='25'>My Title</text>
</svg>

The style of 'graph-title' is set in a separate CSS file as follows:

.graph-title {
  alignment-baseline: middle;
  font-family: Roboto;
  font-size: 1.6em;
  text-anchor: middle;  
}

Javascript can set the font size as follows:

var graphTitle = document.getElementsByClassName('graph-title')[0];
graphTitle.style.fontSize = '10em'; //Title gets much bigger.

However, when I attempt to read fontSize--without first setting it in Javascript--I get the empty string:

console.log(`|${graphTitle.style.fontSize}|`); //outputs ||

Is there some way for Javascript to read the font size that is set by the CSS file?

Scott Marcus · Accepted Answer · 2017-07-28T16:20:08.293

The .style property of an element provides access to a CSSStyleDeclaration object. That object, in turn provides access to all the CSS properties for read/write access. However, when you do those reads and writes, they are limited to getting/setting the styles that are implemented as "inline styles" (styles set directly on the style attribute of the HTML element).

Since CSS styles can be set at the inline level or via an internal style sheet or an external style sheet (which you are using) or a combination thereof, you need to get your data another way. window.getComputedStyle() allows you to perform read operations for all CSS properties no matter where those properties were set. It provides the "computed" value, so when a property is set with a relative unit (like a percent or an em), it returns the absolute value that this relative value computes to.

console.log(window.getComputedStyle(document.querySelector(".graph-title")).fontSize);

.graph-title {
  alignment-baseline: middle;
  font-family: Roboto;
  font-size: 1.6em;
  text-anchor: middle;  
}

<svg class='outer' width='900' height='625'>
    <text class='graph-title' x='450' y='25'>My Title</text>
</svg>

FYI: When setting CSS property values, you should be careful of using the element.style = ... API because (again) this sets an inline style and inline styles are difficult to override when needed. Instead, you are better of preparing CSS classes in your style sheets and then you can simply use the element.classList.add(), element.classList.remove() or element.classList.toggle()methods to quickly manage sets of properties at once.

Your solution works. I just tested it in my code. I am confused about your FYI. I looked up classList on MDN and it seems to be a facility for adding or removing a class. I am trying to get/set the font size in a class that has multiple attributes. Not sure how classList would apply to that. — Argent, Jul 28 '17 at 16:39
@Argent Sometimes you do just want to manipulate one style, independent of the rest of the class and that's perfectly fine. I'm just mentioning that you could also accomplish the same thing by adding another class that just overrides one style from a previously applied class. — Scott Marcus, Jul 28 '17 at 16:43

SoEzPz · Answer 2 · 2017-07-28T17:05:00.957

0

You can get the SVG however you like. I'll use an ID

Note: Answer found here

var pTag = document.getElementById('pTag');
var svg = document.getElementById('svgOne');
var fontSize = window.getComputedStyle(svg).getPropertyValue('font-size');
pTag.innerHTML = ("SVG font-size is " + fontSize);

svg {
  font-size: 50px;
}

#pTag {
  position: absolute;
  top: 0;
  font-size: 23px;
  margin-left: 125px;
}

<svg id="svgOne" class='outer' width='500' height='225'>
  <text class='graph-title' x='45' y='100'>My Title's Awesome!</text>
</svg>

<p id="pTag"></p>

edited Jul 28 '17 at 17:05

answered Jul 28 '17 at 16:20

SoEzPz

14,958
8
61
64

Corrected Scott, thanks for the heads up. – SoEzPz Jul 28 '17 at 16:32

Can Javascript read SVG text element font size?

2 Answers2