Question

我的项目会生成来自此范围的不同文字：

<span id="model-selection-value"></span>

意思，这就是我想要实现的目标：

ORIGINAL

<svg viewBox="0 0 960 300">
        <symbol id="s-text">
            <text text-anchor="middle" x="50%" y="80%">Montserrat</text>
        </symbol>

我的目标

<svg viewBox="0 0 960 300">
    <symbol id="s-text">
        <text text-anchor="middle" x="50%" y="80%"><span id="model-selection-value"></span></text>
    </symbol>

但上面的代码只读纯文本，不是吗？任何方式？

Answer 1

首先，use a tspan within a text SVGElement获得语义SVG的奖励积分。

tspan的文字内容可以这样设置。

var textSpan = document.querySelector('#model-selection-value');

textSpan.textContent = 'Montserrat';

Answer 2

您的HTML：

<svg viewBox="0 0 960 300">
    <symbol id="s-text">
        <text text-anchor="middle" x="50%" y="80%"></text>
    </symbol>
</svg>

jQuery的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
// initialize jquery
$(function() {
    // select desired element
    var $text = $('text');

    // your element to insert
    var myElement = "<span id='model-selection-value'></span>";

    // insert your element
    $text.html(myElement);
});
</script>

结果：

<svg viewBox="0 0 960 300">
    <symbol id="s-text">
        <text text-anchor="middle" x="50%" y="80%"><span id="model-selection-value"></span></text>
    </symbol>
</svg>

如何将<span>放在<text text-anchor =“..”>中

2 个答案: