基于变量加载特定的SVG？

Question

在我的JS文件中有一个名为questionNumber的变量

var questionNumber = 0;

我在HTML中加载了所有SVG，如下所示：

<symbol id="progress-1" viewBow="0 0 134.5 188">    
    <title>progress-1</title>
    <desc>Icon showing progress</desc>
    <path class="a" d="M72.5 18v-4.5c0-3.31 3.19-5.5 6.5-5.5h20.5c3.31 0 6 2.19 6 5.5V18h8V6a6 6 0 0 0-6-6h-37a6 6 0 0 0-6 6v12h8z"/>
    <rect class="a" x="6436.12" y="754.67" width="35.33" height="12.67" rx="6.33" ry="6.33" transform="rotate(-45 2351.07 8168.345)"/><path class="a" d="M124.5 17H50.65c-5.5 0-13.19 3.17-17.09 7.05l-24 23.78c-3.9 3.88-7.09 11.55-7.09 17.05V178a10 10 0 0 0 10 10h112a10 10 0 0 0 10-10V27a10 10 0 0 0-9.97-10zm-1 150c0 4.7-3.75 9-8.33 9H21.84c-4.58 0-8.33-4.34-8.33-9V70.38a23.62 23.62 0 0 1 5.91-14.43l20-20.18C42.67 32.46 49.08 30 53.66 30h61.54a8 8 0 0 1 8.33 8v128.96z"/><path class="a" d="M55.21 36a20.09 20.09 0 0 0-12.69 5.38L24.71 59.93a21.77 21.77 0 0 0-5.2 13.2v88.3c0 4.29 3.19 8.57 7.28 8.57h83.43c4.1 0 7.28-4.27 7.28-8.57V43.57a7.31 7.31 0 0 0-7.28-7.57h-55zm6.22-3.64a9.44 9.44 0 0 1 .07 1.12v-1.24z"/>
</symbol>

现在如何根据变量questionNumber调用正确的SVG ID？因此，如果questionNumber是1，那么应该调用带有id progress-1的SVG。如果questionNumber为2，则应该调用带有id progress-2的SVG，依此类推。基本上是这样的(但这是静态的)：

<span>
    <svg class="button-icon" viewBox="0 0 100 70">
        <use xlink:href="#progress-1"/>
    </svg>
</span>

Answer 1

您可以简单地将字符串“#progress”与questionNumber的返回值连接起来。

var questionNumber = 0;
var svgIconToLoad = "#progress-" + questionNumber;

因为“progress”是String类型的，所以它会将questionNumber (即Number)的值转换为String。

对于其他的选项，您可以这样做：

var spanElem = '<span>
                  <svg class="button-icon" viewBox="0 0 100 70">
                    <use xlink:href="' + svgIconToLoad + '"/>
                  </svg>
                </span>';

然后把它放在文档中的某个地方，假设您已经选择了一些元素，让它是一个带有div“svg”的id：

var element = document.getElementById("svg");
element.html = spanElem;

Answer 2

使用类，首先使用{display:none;}，然后使用javascript或jQuery将其更改为{display:block;} on用户输入。{可见性:没有一个}留下足够的空空间来显示元素，因此下面的元素不会向右或向下移动。