jquery - 如何使 jQuery 生成的文本居中

Question

好吧，我要做一个相框设计师。有兴趣者 here it is .我正在使用 jQuery .keyup 函数生成文本。这是 jQuery。

$('#input').keyup(function() {
    $('.text').html($(this).val());
    $('.text').css("text-align", "center");
});

和相应的 HTML。

<input id="input" type="text" name="Text" value="Your words here">

<text class="text" transform="matrix(2.4428 0 0 1.5 235 550.5599)" font-family="'ComicSansMS'" font-size="41.6368">Your words here</text>

但是我的 CSS 并没有在输入新文本后立即将其居中。

.text {
    fill:white;
    font-family:'Open Sans', sans-serif, verdana;
    text-align:center;
    margin:auto;
}

有什么想法吗？谢谢。

Answer 1

尝试将 transform html 属性更改为

transform="matrix(2.4428 0 0 1.5 600 550.5599)"

不要使用 text-align 属性，您使用的是 SVG，因此正确的 css 属性是

text-anchor: middle

引用资料 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor