Javascript可以读取SVG文本元素的字体大小吗？

问题描述：

我无法通过Javascript访问SVG文本元素的字体大小。Javascript可以读取SVG文本元素的字体大小吗？

的设置如下：

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

“图形的标题”的风格是在一个单独的CSS文件设置如下：

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

的Javascript可以设置字体大小如下：

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

然而，当我试图读取fontSize-- 没有先设定它在Javascript - 我得到空字符串：

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

是否有某种方式为Javascript功能来读取由CSS文件中设置字体大小？

答

元素的.style属性提供了对象的访问权限。该对象反过来提供对所有CSS属性的读写访问权限。但是，当您执行这些读取和写入操作时，它们仅限于获取/设置以“内联样式”实现的样式（样式直接在HTML元素的style属性上设置）。

由于CSS样式可以在内联级别设置，也可以通过内部样式表或外部样式表（您正在使用）或其组合来设置，因此您需要以另一种方式获取数据。 window.getComputedStyle()允许您为所有CSS属性执行读取操作，而不管这些属性设置在哪里。它提供了“计算”的值，所以当一个属性用相对单位（比如百分比或em）设置时，它会返回该相对值计算的绝对值。

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：当设置CSS属性值，你应该小心使用element.style = ... API，因为（再次）这将内联样式和内联样式都需要时难以覆盖的。相反，您最好在样式表中准备CSS类，然后您可以简单地使用element.classList.add()，element.classList.remove()或element.classList.toggle()方法一次快速管理属性集。

您的解决方案工作。我只是在我的代码中测试它。我对你的FYI感到困惑。我在MDN上查找了classList，它似乎是添加或删除类的工具。我试图在具有多个属性的类中获取/设置字体大小。不知道classList如何应用于此。 – Argent

@Argent有时你只是想操纵一种风格，独立于课程的其他部分，这很好。我只是提到你可以通过添加另一个类来完成同样的事情，这个类只是覆盖了以前应用的类中的一种风格。 –

答

不管你喜欢，你可以得到SVG。我将使用一个ID

注：解答发现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>

更正了斯科特，谢谢你的抬头。 – SoEzPz

Javascript可以读取SVG文本元素的字体大小吗？

相关推荐