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，则应调用标识为progress-1的SVG。如果questionNumber为2，则应调用标识为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成为id“svg”：

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

Answer 2

使用类，最初使用{display：none;}并使用javascript或jQuery将此更改为用户输入上的{display：block;}。 {visibility：none}留下足够的空白空间来显示元素，因此后续元素不会向右或向下移动。

根据变量加载特定的SVG？

2 个答案: