使用JS更改SVG文本的字体大小

Question

因此，我尝试使用Javascript根据其长度动态更改SVG文本元素的字体大小。

我尝试使用.sytle.fontSize进行设置，但没有任何变化。 我也尝试过设置具有更大字体大小的不同类并更改JS中的类，但这也无济于事。

HTML：

      <text id="Subtitle" text-anchor="middle" class="subtitle">
        <textPath id="SubtitleInnerHTML" xlink:href="#subtitleTextPath" startOffset="50%">
          MY TEXT
        </textPath>
      </text>

JS：

function ImageSubtitleSwap(content) {
   document.getElementById('SubtitleInnerHTML').innerHTML = content;  //This changes the text to whatever the user inputs, working correctly

   var str = String(content);
   var n = str.length;

   if(n <= 5) {
       document.getElementById('Subtitle').sytle.fontSize = "25px";
    }
}

CSS：

.subtitle {
font-family: 'Cinzel', serif;
font-size: 15px;
stroke: none;
fill: #c5eef6;
}

Answer 1

最终只是一个错字。 可以使用style属性更改svg文本元素的字体大小。

document.getElementById('Subtitle').style.fontSize = "25px";