javascript - 使用 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";