我在一些页面上显示SVG元素，但没有显示其他页面，相同的浏览器、平台等。

Question

折叠代码有一串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同时出现在这两个页面上。

有人能告诉我为什么它们没有出现在第二个链接中吗？我已经比较了css和html，但找不到区别。

Answer 1

因此，我发现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的指针，它必须位于包含xlink:href属性中引用的id的DOM中。

<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“元素创建更多不同的实例来处理。