Question

我无法通过Javascript访问SVG文本元素的字体大小。

设置如下：

(...)
    <Style BasedOn="{StaticResource {x:Type xctk:SelectorItem}}" TargetType="{x:Type xctk:SelectorItem}">

(...)
      <Setter Property="Template">
        <ControlTemplate>
(...)                
          <CheckBox Margin="0.5,0"
                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                    HorizontalContentAlignment="{TemplateBinding HorizontalContentAlignment}"
                    ContentTemplate="{TemplateBinding ContentTemplate}"
                    ContentTemplateSelector="{TemplateBinding ContentTemplateSelector}"
                    Foreground="{TemplateBinding Foreground}"
                    IsChecked="{Binding IsSelected, RelativeSource={RelativeSource TemplatedParent}}"
                    Padding="{TemplateBinding Padding}">
            <ContentPresenter />
          </CheckBox>
(...)
      </ControlTemplate>
    </Style>
(...)

＆＃39;图表标题＆＃39;在一个单独的CSS文件中设置如下：

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

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

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

然而，当我尝试读取fontSize - 而没有先在Javascript中设置时 - 我得到空字符串：

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

有没有办法让Javascript读取CSS文件设置的字体大小？

Answer 1

元素的.style属性提供对 CSSStyleDeclaration 对象的访问权限。该对象反过来提供对读/写访问的所有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>

仅供参考：设置CSS属性值时，应注意使用element.style = ... API，因为（再次）这会设置内联样式，并且在需要时难以覆盖内联样式。相反，您最好在样式表中准备CSS类，然后只需使用element.classList.add()，element.classList.remove()或element.classList.toggle()方法即可快速管理属性集。

Answer 2

您可以随意获取 SVG 。我将使用 ID

注意：找到答案here

＆＃13;

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);

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: