我在某些页面上显示了 SVG 元素，但在其他页面上没有显示，相同的浏览器、平台等
I have SVG element displaying on some pages but not others, same browser, platform et al
下面的代码有一堆 svg 三角形
<svg class="constellation" viewBox="0 0 275 275">
<use class="constellation__1" xlink:href="#constellation-svg" data-props="190x190,83,38" transform="scale(0.693582)" x="119.66851188213664" y="54.78800219180441"></use>
<use class="constellation__2" xlink:href="#constellation-svg" data-props="107x107,64,67" transform="scale(0.390596)" x="163.851982" y="171.532544"></use>
<use class="constellation__3" xlink:href="#constellation-svg" data-props="53x53,148,200" transform="scale(0.193473)" x="764.96462" y="1033.735676"></use>
此 svg 代码出现在两个不同的页面上。在一个页面上它显示在另一页上它没有。我没有设置任何一个页面，但我的任务是让 svg 显示在两个页面上。
谁能告诉我为什么他们没有出现在第二个link中？我比较了 css 和 html，但找不到区别。
所以我发现 svg "use" 元素需要源 svg。它不包含实际的 svg 矢量坐标，因此使用 svg "use" 元素需要一个指向 DOM 中实际 svg 元素的指针。例如，"use" 元素需要这样的属性：xlink:href="#some_id_of_an_actual_svg" 指向包含实际矢量信息的 svg 元素。 svg id="some_id_of_an_actual_svg"
所以
<svg class="my-svg">
<use xlink:href="#some_id_of_an_actual_svg"></use>
</svg>
单独使用时不是 svg，它是指向 svg 的指针，它必须在 DOM 中，包含 xlink:href 属性中引用的 id。
<svg id="some_id_of_an_actual_svg" viewBox="0 0 467 467" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" d="M466.2 455.5V31.2C466.2 14.5 452.7 1 436 1H11.7C5.8 1 1 5.8 1 11.7c0 3 1.2 5.6 3.1 7.6l443.8 443.8c1.9 1.9 4.6 3.1 7.6 3.1 5.9 0 10.7-4.8 10.7-10.7" class="some-class"></path></svg>
单独添加 svg "use" 不会显示任何内容，两个 svg 元素都必须存在。该过程是隐藏源 svg 并使用 "use" 元素创建它的多个版本并设置不同的样式。或者甚至使用未隐藏的源 svg 来表示您的第一个实例，然后使用 "use" 元素创建它们的更多实例以进行不同的处理。
下面的代码有一堆 svg 三角形
<svg class="constellation" viewBox="0 0 275 275">
<use class="constellation__1" xlink:href="#constellation-svg" data-props="190x190,83,38" transform="scale(0.693582)" x="119.66851188213664" y="54.78800219180441"></use>
<use class="constellation__2" xlink:href="#constellation-svg" data-props="107x107,64,67" transform="scale(0.390596)" x="163.851982" y="171.532544"></use>
<use class="constellation__3" xlink:href="#constellation-svg" data-props="53x53,148,200" transform="scale(0.193473)" x="764.96462" y="1033.735676"></use>
此 svg 代码出现在两个不同的页面上。在一个页面上它显示在另一页上它没有。我没有设置任何一个页面，但我的任务是让 svg 显示在两个页面上。
谁能告诉我为什么他们没有出现在第二个link中？我比较了 css 和 html，但找不到区别。
所以我发现 svg "use" 元素需要源 svg。它不包含实际的 svg 矢量坐标，因此使用 svg "use" 元素需要一个指向 DOM 中实际 svg 元素的指针。例如，"use" 元素需要这样的属性：xlink:href="#some_id_of_an_actual_svg" 指向包含实际矢量信息的 svg 元素。 svg id="some_id_of_an_actual_svg"
所以
<svg class="my-svg">
<use xlink:href="#some_id_of_an_actual_svg"></use>
</svg>
单独使用时不是 svg，它是指向 svg 的指针，它必须在 DOM 中，包含 xlink:href 属性中引用的 id。
<svg id="some_id_of_an_actual_svg" viewBox="0 0 467 467" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" d="M466.2 455.5V31.2C466.2 14.5 452.7 1 436 1H11.7C5.8 1 1 5.8 1 11.7c0 3 1.2 5.6 3.1 7.6l443.8 443.8c1.9 1.9 4.6 3.1 7.6 3.1 5.9 0 10.7-4.8 10.7-10.7" class="some-class"></path></svg>
单独添加 svg "use" 不会显示任何内容，两个 svg 元素都必须存在。该过程是隐藏源 svg 并使用 "use" 元素创建它的多个版本并设置不同的样式。或者甚至使用未隐藏的源 svg 来表示您的第一个实例，然后使用 "use" 元素创建它们的更多实例以进行不同的处理。