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

尝试将变换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

如何使用jQuery生成的文本居中

1 个答案: